References

Beginner-friendly references for web development, with live, editable examples.

The CSS order property

Property CSS All modern browsers Updated
Quick answer

The CSS order property changes where a flex or grid item appears, without moving it in the HTML. Items are laid out by ascending order value (default 0); a higher number moves an item later, a negative number earlier. Because it only changes the visual order, not the DOM order, use it carefully — it can desync keyboard and screen-reader navigation.

Overview

order lets you rearrange flex or grid items visually while leaving the HTML untouched. Every item starts at 0 and the browser lays them out from lowest value to highest, so giving one item order: -1 floats it to the front, and order: 1 sends it to the back.

It is genuinely handy for responsive tweaks — showing a sidebar after the main content in the markup (which is better for source order) but before it on wide screens, say. A single order value inside a media query can reflow a layout without duplicating any markup.

But it comes with the same warning as the reverse values of flex-direction: it changes only what you see, not the order the page is read or tabbed through. Lean on it for cosmetic reordering, and when the sequence genuinely matters, fix the HTML instead — more on that below.

Syntax

/* move this item to the front, visually */
.featured {
  order: -1;
}

Values

The order property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
0 The default. Items appear in source order.
positive A higher value moves the item later, e.g. order: 1.
negative A negative value moves the item earlier, e.g. order: -1.

Example

Live example 
<style>
  .row { display: flex; gap: 10px; font: 600 14px system-ui, sans-serif; }
  .row div { background: #1c7ce9; color: #fff; padding: 14px 18px; border-radius: 8px; }
  .first { order: -1; }
  .last { order: 1; }
</style>
<div class="row">
  <div class="last">1st in HTML</div>
  <div>2nd in HTML</div>
  <div class="first">3rd in HTML</div>
</div>

Best practices

  • Use order for cosmetic, responsive reordering — not as a substitute for getting the HTML sequence right.
  • Keep the default 0 for most items and only set order on the few you need to move.
  • Inside a media query, order can rearrange a layout for wide screens while the markup stays optimal for reading.
  • When the order is meaningful (steps, a conversation, a form), put it in the markup so focus order matches the visual order.

Accessibility

order changes the painted position of items but not their place in the DOM, and keyboard focus plus screen-reader reading both follow the DOM. So a layout reordered with order can have a keyboard user tabbing in a sequence that does not match what they see — the exact "meaningful sequence" problem WCAG warns about.

The rule of thumb: if a sighted user and a keyboard user would be confused by the difference, the order is meaningful and belongs in the HTML. Reserve order for purely visual arrangement where the sequence does not carry meaning.

Frequently asked questions

How do I reorder flex items in CSS?
Set the order property on the items. Lower values come first; order: -1 moves an item to the front, order: 1 toward the back. The HTML order stays the same.
Does order change the HTML order?
No. It only changes the visual layout. The DOM order — which keyboard focus and screen readers follow — is unchanged, which is why it should be used cautiously.
Is the order property bad for accessibility?
It can be, because visual order and focus order can diverge. Use it for cosmetic reordering only; when the sequence matters, set it in the markup instead.
What is the default value of order?
It is 0. All items share it, so they appear in source order until you change one.
opacity outline