更改 div 中的弹性订单？

Question

我正在尝试使用 flex-col，其中图像先出现。但是，下面的代码只会在 flex 方向为行时更改顺序（左图）。它不适用于行。

</head> 
<body>
    <div class="flex-row">
        
        <div class="order-2">
            <h1>Flying Kites</h1>
            <h2>Subheader</h2>
        </div>
      <img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
    </div>
</body>
</html>

Answer 1

为了让类 order-x 起作用，父元素需要是 flex:

<div class="flex">
  <div class="order-2">
    <h1>Flying Kites</h1>
    <h2>Subheader</h2>
  </div>
  <img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
</div>

查看实例：https://play.tailwindcss.com/AFxRfm5JjN

查看文档用法：https://tailwindcss.com/docs/order#usage

Answer 2

为了灵活 div，父 class 必须 'flex' 才能工作。

更改 div 中的弹性订单？

Change flex order in div?

html

css

tailwind-css