Visual order and source order

The visual arrangement can change, but reading and keyboard order still follow the HTML.

Integer order values

Source order below: First, Second, Third, Fourth.

First: order 2 Second: order -1 Third: order 0 Fourth: order 0

Lower values display first. Ties retain source order, so Third stays before Fourth.

Important HTML

Source order and visual order can differ.

<div class="order-demo">
  <span>A</span><span>B</span><span>C</span>
</div>

Important CSS

order shifts painting order without editing HTML.

.order-demo { display: flex; flex-wrap: wrap; }
.order-demo .late { order: -1; }