按移动和桌面断点对标签内容进行排序

Question

我想知道如何根据移动和桌面断点来排序我的 div。我有：

<div>
    <span> foo </span>
    <span> bar </span>
    <span> baz </span>
</div>

我希望达成这样的结果：

仅在移动断点上 firstspan & secondspan 在同一行，所以：

foobar
baz

并且仅在桌面断点上 secondspan & thirdspan 在同一行，所以：

foo
barbaz

我通常使用 Tailwind（但我认为这些信息无关紧要），我尝试使用 flex、break-line 但什么都没有，我不明白如何创建此代码。

Answer 1

要使用 tailwindCSS 实现此目的，您可以使用 grid and make col-span responsive。

在下面的例子中，firstspan 和 secondspan 在第一行直到小断点，对于大于 small 的屏幕，firstspan 单独在一行，secondspan 和 thirdspan 在同一行。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="grid grid-cols-2">
  <div class="sm:col-span-2">First span</div>
  <div>Second span</div>
  <div>Third span</div>
</div>

根据@davide 的评论进行编辑

要让元素在同一行，最简单的解决方案是重复 secondspan 两次，然后使用 responsive breakpoints with display 类隐藏或根据屏幕尺寸显示。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div>
  <span>First span</span>
  <span class="sm:hidden">Second span</span>
</div>
<div>
  <span class="hidden sm:inline">Second span</span> 
  <span>Third span</span>
</div>

按移动和桌面断点对标签内容进行排序

Sort the tags content by mobile & desktop breakpoint

html

javascript

css

reactjs

tailwind-css