CSS
Reordering Flex Items Visually with CSS `order`
Learn to visually reorder items within a Flexbox container using the `order` CSS property, improving accessibility and responsive design without altering HTML structure.
.flex-container {
display: flex;
flex-direction: row; /* Default */
}
.item-a {
order: 2; /* Appears after item-b in a row layout */
}
.item-b {
order: 1; /* Appears before item-a */
}
.item-c {
order: 3; /* Appears last */
}
/* Example with media query for responsiveness */
@media (max-width: 768px) {
.flex-container {
flex-direction: column;
}
.item-a {
order: 1; /* Reorder for mobile, item-a now first */
}
.item-b {
order: 2;
}
}
How it works: The `order` property allows you to change the visual order of flex items within their container, independent of their source order in the HTML. Items with lower `order` values appear first. By default, all flex items have an `order` of `0`. This is particularly useful for responsive design, enabling different element arrangements across various screen sizes using media queries without touching the HTML markup.