flexbox order property reorder items
The `order` property takes an integer (positive, negative or zero, the default for every item) and visually reorders flex items from lowest to highest value, without changing the actual element order in the HTML. It is the classic tool for, say, showing an image before the text on large screens and after the text on mobile, without duplicating markup.
The image moves from order 1 (default HTML position) to -1 (before everything) only inside the mobile media query.
order: -1 is always lower than the default 0, so this item jumps to the start without touching the others.
justify-content aligns items along the main axis (set by flex-direction), align-items aligns along the cross axis, perpendicular to the main one. With `flex-direction: row`, justify-content controls horizontal alignment and align-items vertical, in `column` the two swap.
No. Screen readers follow DOM order (the actual HTML order), not the visual order set by order. Using order to rearrange content in a way that no longer makes sense when read aloud is a real accessibility problem to avoid.
Technically no, it accepts any integer within CSS's 32-bit signed integer range. In practice, most real use cases stay between -1 and the number of items, very large values (like 9999) have no advantage over a small value that is already higher than the rest.
Yes, order is a property shared by both Flexbox and Grid with the same visual behavior (reorders without changing the DOM). In Grid, it interacts with the automatic placement of items that have no explicit grid-column/grid-row.
Click an item to edit it, drag to reorder it (changes each item's order).
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}CSS is generated locally in your browser.