| Class | Properties |
|---|---|
.flex-first | order: -1; |
.flex-last | order: $column-number + 1; |
Where $column-number is a Sass variable representing the number of columns.
Usage
Use .flex-first display a given flex item first, regardless of its position in a container.
<div class="flex justify-content-start bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-first text-gray-700 text-center bg-white px-4 py-2 m-2">3</div>
</div>Use .flex-last display a given flex item last, regardless of its position in a container.
<div class="flex justify-content-start bg-gray-200">
<div class="flex-last text-gray-700 text-center bg-white px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Variants
By default, only responsive variants are generated for order utilities.
Responsive
To control the flex order of an element at a specific breakpoint, add a {screen}: prefix to any existing order utility.
For example, use .md:flex-first to apply the flex-first utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:flex-first, add "flex-order" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"flex-order",
);