Flex Order

Utilities for controlling the order of flex or grid items within a container.

Class Name	CSS Equivalent
order-1	order: 1;
order-2	order: 2;
order-3	order: 3;
order-4	order: 4;
order-5	order: 5;
order-6	order: 6;
order-7	order: 7;
order-8	order: 8;
order-9	order: 9;
order-10	order: 10;
order-11	order: 11;
order-12	order: 12;
order-first	order: -9999;
order-last	order: 9999;
order-none	order: 0;

Ordering flex and grid items

Use order-{order} to render flex and grid items in a different order than they appear in the DOM.

<div class="flex gap-m w-full">
  <div class="order-1 [...]">1</div>
  <div class="order-3 [...]">2</div>
  <div class="order-2 [...]">3</div>
</div>

1

2

3

Order-First

The .order-first class sets the order property to -9999. This moves the element to the beginning of the flex container, making it the first item.

<div class="flex gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="order-first [...]">3</div>
</div>

1

2

3

Order-Last

The .order-last class sets the order property to 9999. This moves the element to the end of the flex container, making it the last item.

<div class="flex gap-m w-full">
  <div class="[...]">1</div>
  <div class="order-last [...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Order-None

The .order-none class sets the order property to 0. This maintains the element's original order within the flex container.

<div class="flex gap-m w-full">
  <div class="[...]">1</div>
  <div class="order-none [...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3