order

Utilities for controlling the order of flex and grid items.

Examples

Explicitly setting a sort order

Use order-<number> utilities like order-1 and order-3 to render flex and grid items in a different order than they appear in the document:

Ordering items first or last

Use the order-first and order-last utilities to render flex and grid items first or last:

Using negative values

To use a negative order value, prefix the class name with a dash to convert it to a negative value:

<!-- [!code classes:-order-1] -->
<div class="-order-1">
  <!-- ... -->
</div>

Using a custom value

Responsive design