CSS
Reorder Flex Items Programmatically with CSS `order`
Learn how to easily change the visual order of flex items on a webpage using the CSS `order` property, improving accessibility and layout flexibility without altering HTML.
.flex-container {
display: flex;
}
.item-1 { order: 2; }
.item-2 { order: 3; }
.item-3 { order: 1; }
.item-4 { order: 4; }
How it works: This snippet demonstrates how to reorder items within a flex container using the `order` property. By default, flex items have `order: 0`. Items with lower `order` values appear before items with higher values. This is powerful for responsive designs or accessibility, allowing visual order to differ from the source HTML without changing the underlying DOM structure.