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
Contact Us