CSS
Reorder Flexbox Items with the `order` Property
Discover how to easily change the visual display order of flex items independently of their source HTML order using the `order` CSS property.
.flex-container {
display: flex;
border: 1px solid #ccc;
padding: 10px;
}
.flex-item {
padding: 15px;
margin: 5px;
background-color: lightcoral;
color: white;
font-weight: bold;
}
.item-a { order: 2; background-color: #4CAF50; } /* Will appear second */
.item-b { order: 1; background-color: #f44336; } /* Will appear first */
.item-c { order: 3; background-color: #2196F3; } /* Will appear third */
/* HTML structure for the snippet */
/*
<div class="flex-container">
<div class="flex-item item-a">Item A (Original position 1)</div>
<div class="flex-item item-b">Item B (Original position 2)</div>
<div class="flex-item item-c">Item C (Original position 3)</div>
</div>
*/
How it works: The `order` property in Flexbox allows you to change the visual order of flex items, independent of their order in the source HTML. Items are laid out according to their `order` value, from lowest to highest. Items with the same `order` value are laid out in their original source order. This is useful for responsive design where content needs to be rearranged visually.