Flexbox & Grid

order

Sort the visual order of flex and auto-placed grid items.

Class	Declarations
`order:0`	`order: 0;`
`order-first`	`order: -999999;`
`order-last`	`order: 999999;`
`order:<value>`	`order: <value>;`

Visual order

The blue item receives the selected order value. Equal values keep the source sequence: 01, 02, 03.

order:* sorts flex and auto-placed grid items from the lowest value to the highest. Items with equal values retain source order. The same three items below appear as 03, 01, 02: item 03 keeps the default zero and the other two share an order of 1.

Change visual order

Lower order values appear first. Equal values keep their source sequence; the blue item remains first in the DOM.

<div id="layout" class="flex gap-sm">  <div id="target" class="flex:none order:1 h:4rem w:5rem p-sm">01</div>  <div id="peer" class="flex:none order:1 h:4rem w:5rem p-sm">02</div>  <div id="item-3" class="flex:none h:4rem w:5rem p-sm">03</div></div>

<div id="layout" class="grid grid-cols:3 gap-sm">  <div id="target" class="order:1 h:4rem min-w:0 p-sm">01</div>  <div id="peer" class="order:1 h:4rem min-w:0 p-sm">02</div>  <div id="item-3" class="h:4rem min-w:0 p-sm">03</div></div>

Generated CSS

@layer utilities {  .order\:1 {    order: 1  }}

Explicit grid placement can determine a cell independently of this auto-placement order.

Keep source order meaningful

CSS order changes the visual arrangement without changing the DOM. Focus Source 1 and press Tab to follow the native keyboard sequence through Source 2 and Source 3. The buttons use tabindex="0" to request sequential keyboard focus in source order. No positive tabindex is used to patch the visual order.

Keep source order meaningful

Focus Source 1, then press Tab. The browser follows the source sequence; CSS order changes only these items’ visual positions.

<div id="layout" class="flex gap-sm">  <button id="target" type="button" tabindex="0" class="flex:none order:2 h:4rem w:5rem p-xs">Source 1</button>  <button id="peer" type="button" tabindex="0" class="flex:none order:1 h:4rem w:5rem p-xs">Source 2</button>  <button id="item-3" type="button" tabindex="0" class="flex:none h:4rem w:5rem p-xs">Source 3</button></div>

Keep a useful reading and focus order in the source. Reordering a sequential form or workflow visually can make keyboard navigation confusing.

Apply conditionally

Use conditional queries to change the blue item’s visual position from sm. Its default order of 2 places it last. At order 0 it ties with its siblings, so its original first position wins.

Apply conditionally

Lower order values appear first. Equal values keep their source sequence; the blue item remains first in the DOM.

<div id="layout" class="flex gap-sm">  <div id="target" class="flex:none order:2 h:4rem w:5rem p-sm order:0@sm">01</div>  <div id="peer" class="flex:none h:4rem w:5rem p-sm">02</div>  <div id="item-3" class="flex:none h:4rem w:5rem p-sm">03</div></div>