How to use the order utility class In CSS
The order utility class in tailwind CSS is one of the widely used ways to set the order of the flex items. The default order is 0, however, you can use positive or negative values to rearrange the items.
Syntax:
// n can take positive as well as negative values.
<div class="order-{n}"></div>
Example: Implementation using the order 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 Order Utility</title> </head> <body class="p-8"> <h2 class="text-green-300 text-2xl font-bold mb-4"> Using the 'order' Utility Class in Tailwind CSS </h2> <div class="flex"> <div class="order-2 bg-blue-300 p-4 m-2"> Item 1 (Order 2) </div> <div class="order-1 bg-green-300 p-4 m-2"> Item 2 (Order 1) </div> <div class="order-3 bg-yellow-300 p-4 m-2"> Item 3 (Order 3) </div> </div> <div class="flex mt-4"> <div class="order-3 bg-yellow-300 p-4 m-2"> Item 1 (Order 3) </div> <div class="order-(-1) bg-red-300 p-4 m-2"> Item 2 (Order -1) </div> <div class="order-1 bg-green-300 p-4 m-2"> Item 3 (Order 1) </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