A page's HTML sets an order, the one content gets read in, tabbed through, or announced by a screen reader. That order almost always matches the intended visual order, except in a few specific cases: a button pushed visually forward even though it appears later in the markup, or an image that should come before a paragraph on desktop but after it on mobile. order answers that need, but with an important limit worth knowing about.
It comes up in layouts where the visual order needs to differ from the content's logical order, for example for marketing emphasis or a one-off visual constraint.
Definition
order is the property that changes an item's visual position inside a Flexbox or CSS Grid container, without changing its position in the HTML document. It accepts an integer, positive, negative, or zero.
.item {
order: 2;
}Every item inside a flex or grid container defaults to an order value of 0. An item with a higher value gets positioned visually after items with a lower value, regardless of its original position in the HTML.
How the ranking works
The browser sorts items in ascending order of their order value before displaying them. Two items sharing the same order value keep their original relative order from the HTML.
.first {
order: 3;
}
.second {
order: 1;
}
.third {
order: 2;
}Even though .first appears first in the HTML, it displays last on screen, since its order value is the highest of the three. The visual order becomes: .second, .third, .first.
A concrete example
A layout that shows an image before a paragraph on a large screen, but a paragraph before the image on mobile, shows off a common pairing of order with a media query.
.section {
display: flex;
flex-direction: column;
}
.image {
order: 2;
}
@media (min-width: 768px) {
.image {
order: 0;
}
}On mobile, the image moves after the text thanks to order: 2. On a large screen, order resets to 0, and the image goes back to its original HTML position, with no element ever moved in the markup.
The accessibility pitfall
order only changes how items appear visually. The reading order used by keyboard navigation, through the Tab key, and the order announced by a screen reader, both stay strictly tied to the HTML, with no regard for any order values set in CSS.
order for small, one-off shifts, never for a full page reorganization, keeps that risk in check.A quick test is to navigate the whole page by keyboard alone, without touching the mouse, and compare what the visible focus shows against the order displayed on screen. A meaningful mismatch between the two is the signal that order's use on that layout deserves a second look, or at least needs limiting to a very small number of items.
Frequently asked questions
order accept negative values?Yes, a negative value like order: -1 moves an item ahead of every other item still sitting at the default value of 0, with no need to renumber every other item in the container with increasing positive values.
order work outside a flex or grid container?No, order only affects the direct children of a container with display: flex or display: grid. Set on an item outside that context, it produces no visible effect at all, exactly like align-self outside a flex or grid container.
order be avoided entirely for accessibility reasons?Not entirely, but it deserves caution. order stays useful for small, one-off visual adjustments, especially paired with a media query that only shifts one or two items. For a bigger, lasting reorganization of content, revisiting the HTML order directly is almost always the better call rather than compensating for it in CSS.