order

Changing the order of item in flex or grid container.

Overview

Examples

Change visual order

Use order:* to change the visual order of flex or grid items.

<div class="flex">    <aside class="order:2">Sidebar</aside>    <main class="order:1">Content</main></div>

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

Keep source order meaningful

Use order utilities for responsive layout adjustments, not as a replacement for semantic markup.

<aside class="order:2 order:0@sm">...</aside>

order changes visual layout only. Screen readers and keyboard navigation still follow source order in many workflows.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="order:2 order:0@sm order:0@print">...</div>

Prefer source order whenever it can satisfy the layout.