Change flex order in div?-CodePudding

I'm trying to have a flex-col, where the image goes first. However, the code below will only change the order when the flex direction is row(image on left). It will not work on row.

</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>

CodePudding user response：

In order to have classes order-x work, the parent element needs to be 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>

See live example: https://play.tailwindcss.com/AFxRfm5JjN

See doc usage: https://tailwindcss.com/docs/order#usage

CodePudding user response：

In order to flex the div, the parent class must be 'flex' for it to work.