CSS
Visually Reorder Flex Items with CSS `order` Property
Learn how to visually reorder elements within a Flexbox container using the `order` property, allowing you to change display order without altering the HTML source order for responsiveness or accessibility.
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
border: 1px solid #ccc;
}
.flex-item {
padding: 1rem;
background-color: #f0f0f0;
border: 1px solid #ddd;
flex: 1 1 auto;
min-width: 150px;
}
/* Default order (source order) is 0. Lower 'order' values appear first. */
.flex-item:nth-child(1) { order: 2; } /* Item 1 appears third */
.flex-item:nth-child(2) { order: 0; } /* Item 2 appears first (default) */
.flex-item:nth-child(3) { order: 1; } /* Item 3 appears second */
.flex-item:nth-child(4) { order: 3; } /* Item 4 appears last */
/* HTML Structure for context:
<div class="flex-container">
<div class="flex-item">Item A (Default order: 0)</div>
<div class="flex-item">Item B (Default order: 0)</div>
<div class="flex-item">Item C (Default order: 0)</div>
<div class="flex-item">Item D (Default order: 0)</div>
</div>
*/
How it works: This snippet demonstrates how to use the `order` property on flex items. By default, all flex items have an `order` value of 0 and appear in their source HTML order. Assigning different `order` values allows you to visually resequence them. Items with lower `order` values appear before items with higher values. This is particularly useful for responsive design where the visual order might need to change based on screen size, without impacting semantic HTML.