How to use the flex-col-reverse utility class In CSS

Using the order-first and order-last utility class

The flex-col-reverse utility class is used when you want to reverse the order of the flex container but in a column-oriented manner.

Syntax:

<div class="flex flex-col-reverse">
  <!-- Flex items in reversed order -->
</div>

Example: Implementation using the flex-col-reverse utility class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet"> 
    <title>Tailwind CSS flex-col-reverse Utility</title> 
</head> 
  
<body class="p-8"> 
  
    <h2 class="text-2xl text-green-300 font-bold mb-4"> 
        Using the 'flex-col-reverse' Utility Class in Tailwind CSS 
    </h2> 
  
    <div class="flex flex-col-reverse"> 
        <div class="bg-blue-300 p-4 m-2">Item 1</div> 
        <div class="bg-green-300 p-4 m-2">Item 2</div> 
        <div class="bg-yellow-300 p-4 m-2">Item 3</div> 
    </div> 
  
</body> 
  
</html>

Output:

How to change the Order of Flex Items in Tailwind CSS ?

In Tailwind CSS, Changing the order of flex items allows you to create a responsive design and adjust the layout based on screens of different sizes or orientations. It applies to the elements under the flex container.