Order

The order utility allows you to control the visual order of elements inside a flex or grid container using predefined values. It supports both static and responsive variants generated through mixins and loops.

Naming convention

All classes follow the structure:

.u--order-{value}
.u--order-{breakpoint}-{value}

When to use

Use this utility when:

You need to change the visual order of elements without modifying the HTML structure
You want to adjust the order responsively across breakpoints

Values

first → sets order: -1
numeric values (e.g. 1) → map directly to the order property

Responsive variants

This utility supports responsive variants, using breakpoint prefixes like: tablets, tabletm, tabletl, laptop, desktop, wide.

How to use

In HTML

<div class="u--order-first u--order-tablets-1">
  <!-- Content -->
</div>

In CSS

.c--item-a {
  @extend .u--order-first;
  @extend .u--order-tablets-1;
}

Knowledge Check

Test your understanding of this section

Loading questions...