Sections

Flex order

Utilities for controlling the order of flex items.

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.

1
2
3
<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.

1
2
3
<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",
);