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@print order:0@sm">...</div>

Prefer source order whenever it can satisfy the layout.