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

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 并制作 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 和 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>