CSS
Visually Reorder Flex Items with `order` Property
Learn to visually reorder items within a flex container using the CSS `order` property, enabling adaptive layouts without altering the HTML structure.
.flex-container {
display: flex;
border: 1px solid #ccc;
padding: 10px;
}
.item {
padding: 20px;
margin: 5px;
background-color: #f0f0f0;
text-align: center;
}
.item-a {
order: 3; /* Appears third visually */
}
.item-b {
order: 1; /* Appears first visually */
}
.item-c {
order: 2; /* Appears second visually */
}
/* HTML Structure Example: */
/* <div class="flex-container">
/* <div class="item item-a">Item A</div>
/* <div class="item item-b">Item B</div>
/* <div class="item item-c">Item C</div>
/* </div> */
How it works: The `order` property in Flexbox allows you to change the visual order of flex items within their container, independent of their order in the source HTML. Items are ordered numerically from lowest to highest. By default, all items have an `order` of 0. This is particularly useful for responsive design where the visual presentation needs to change without modifying the underlying document structure, which helps maintain accessibility.