CSS
Flexbox: Dynamically Reorder Items with `order` Property
Learn how to use CSS Flexbox `order` property to visually resequence elements, improving accessibility and adapting layouts for different screen sizes without modifying the HTML structure, crucial for responsive design.
/* CSS */
.flex-container {
display: flex;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.flex-item {
padding: 15px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ddd;
}
/* Applied order: Item C -> Item A -> Item B */
.item-a { order: 2; }
.item-b { order: 3; }
.item-c { order: 1; }
/* HTML Structure (for context):
<div class="flex-container">
<div class="flex-item item-a">Item A</div>
<div class="flex-item item-b">Item B</div>
<div class="flex-item item-c">Item C</div>
</div>
*/
How it works: The `order` property in CSS Flexbox allows you to change the visual order of flex items within their container, regardless of their order in the source HTML. Items are arranged based on their `order` value, with lower values appearing first. Items with the same `order` value maintain their source order. This is incredibly useful for responsive design adjustments or improving accessibility by visually rearranging content without affecting the DOM structure, which can be particularly beneficial for screen readers.