Tailwind CSS + React - 配置棘手的响应式布局

Question

我想使用 Tailwind 配置一个在更大屏幕上改变的布局。但是，我无法配置布局以便在移动设备和更大的屏幕上进行调整。

布局：-

手机版：

A B

C D

对于更大的屏幕：

A

B D

C

如何创建它？是否有可能创建这样的布局？

我现在在做什么（可以复制到https://play.tailwindcss.com/查看）：-

<div class="flex flex-row md:flex-col">
  <div class="flex flex-col">
    <div class="bg-blue-500">Content A</div>
    <div class="bg-red-500">Content C</div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="bg-green-500">Content B</div>

    <div class="bg-yellow-500">Content D</div>
  </div>
</div>

Answer 1

我认为我们不能仅使用

flex-row

和

flex-col

来实现上述布局。 我们应该使用

hidden

来实现您的布局。

<div class="flex flex-row md:flex-col">
  <div class="flex flex-col">
    <div class="bg-blue-500">Content A</div>
    <div class="bg-red-500 block md:hidden">Content C</div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="bg-green-500">Content B</div>
    <div class="bg-yellow-500">Content D</div>
  </div>
  <div class="flex hidden md:block">
    <div class="bg-red-500">Content C</div>
  </div>
</div>