order: visual reordering without DOM changes

Rearrange visually without touching HTML

.first  { order: -1; }   /* show first regardless of DOM position */
.last   { order: 99; }   /* show last */
.normal { order: 0; }    /* default */

Lower order values render first. Default is 0 — negative values push to the start, large positive values push to the end.

When this is the RIGHT tool

• Mobile re-ordering. A "back to top" button that lives at the end of the DOM (good for screen readers) but visually appears at the top of mobile layouts.
• Conditional layouts. "Featured" item appears first; same component used elsewhere shows it in its natural position.

@media (max-width: 600px) {
  .cta { order: -1; }   /* push CTA to top on mobile */
}

Accessibility warning

order changes VISUAL order. It does NOT change Tab order (keyboard) or screen reader order. Heavily reordering can confuse:

• A keyboard user tabs through in DOM order — looks random.
• A screen reader hears items in DOM order — confusing if visuals don't match.

Use order for SMALL visual tweaks. For major reordering, change the actual DOM (either with JS or by changing source order).

Compare with grid

CSS Grid lets you place items by explicit row/column. That's a cleaner "different layouts on different breakpoints" tool than order for big rearrangements.