How to use the order-first and order-last utility class In CSS
The order-first and order-last utility classes are applied over two div elements. The order first brings the elements to the beginning of flex container. On the other hand, order-last brings the flex item to the end of the container.
Syntax:
<div class="order-first"></div>
<div class="order-last"></div>
Example: Implementation using the using the order-first and order-last 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-first and order-last Utility</title> </head> <body class="p-8"> <h2 class="text-2xl text-green-300 font-bold mb-4"> Using the `order-first` and `order-last` Utility Classes in Tailwind CSS </h2> <div class="flex"> <div class="order-last bg-blue-300 p-4 m-2"> Item 1 (Order Last)\ </div> <div class="bg-green-300 p-4 m-2">Item 2</div> <div class="order-first bg-yellow-300 p-4 m-2"> Item 3 (Order First) </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