CSS
Changing Element Order with Flexbox 'order' Property
Dynamically reorder elements within a Flex container for responsive layouts or specific design needs using the powerful 'order' property.
.flex-container {
display: flex;
flex-direction: row; /* Default order: item1, item2, item3 */
border: 1px solid #ccc;
padding: 10px;
}
.flex-item {
padding: 15px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ddd;
}
.item-1 { order: 2; }
.item-2 { order: 3; }
.item-3 { order: 1; }
/* Example for responsive reordering */
@media (max-width: 600px) {
.flex-container {
flex-direction: column; /* Stack vertically on small screens */
}
.item-1 { order: 3; } /* Change order for mobile */
.item-2 { order: 1; }
.item-3 { order: 2; }
}
How it works: The `order` property in Flexbox allows you to change the visual order of flex items independently of their source code order. Items are ordered based on their `order` value, with lower values appearing first. Items with the same `order` value are ordered by their appearance in the source code. This is incredibly useful for responsive design, allowing you to re-arrange content based on screen size or user preference without altering the HTML structure.