How to use the flex-col-reverse utility class In CSS
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.
Table of Content
- Using the order utility class
- Using the flex-col-reverse utility class
- Using the order-first and order-last utility class