order

order assigns a visual ordinal group to flex and grid items. Lower integers appear first; items with equal values keep their source order. It is not a command to rewrite the DOM.

Compare default and earlier items

The last item has order:-1, so it appears before the two default-zero items. Order:1 would appear after zero, not before it.

<div class="items">
  <span>Source 1</span><span>Source 2</span
  ><span class="earlier">Source 3</span>
</div>

.items {
  display: flex;
  gap: 0.5rem;
}
.items span {
  padding: 0.5rem;
  background: #dbeafe;
}
.earlier {
  order: -1;
}

Inspect focus versus visual position

This exercise intentionally reorders a link to expose the risk. Tab through the links and compare focus movement with their displayed positions. Keep the source order coherent in production.

<nav class="links" aria-label="Order inspection">
  <a href="#first">First in source</a><a href="#second">Second in source</a
  ><a class="last" href="#third">Third in source</a>
</nav>
<p id="first">First destination</p>
<p id="second">Second destination</p>
<p id="third">Third destination</p>

.links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.last {
  order: -1;
}
a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

Values and applicability

The initial value is 0 and order is not inherited. Integers can be positive or negative; fractional values are invalid. Order applies to flex and grid items, including order-modified placement behavior in Grid. It does not rearrange ordinary block siblings.

Accessibility and alternatives

Visual order changes do not generally change speech or sequential keyboard navigation. A sequence that jumps around the screen can be difficult to follow, so write the desired logical sequence in the DOM instead of using CSS to repair it.

The original guidance said order:1 appears before default items; it actually follows order:0. Use flex-direction for axis direction and grid placement deliberately when the layout requires it, while checking reading order.

Sources and browser support

MDN: order describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.