CSS
Dynamic Content Ordering and Reverse Layouts with Flexbox
Utilize Flexbox `order` property and `flex-direction` to dynamically reorder content elements, perfect for responsive designs or varying content flows.
.flex-container {
display: flex;
flex-direction: row; /* Default: item 1, item 2, item 3 */
gap: 10px;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.flex-item {
padding: 15px;
background-color: #a7d9f7;
border: 1px solid #7cbeef;
border-radius: 4px;
}
/* Example 1: Change order for a specific item */
.flex-item:nth-child(2) {
order: 3; /* This item will appear last */
}
.flex-item:nth-child(3) {
order: 2; /* This item will appear second */
}
/* Default order is 0, so items without `order` will appear first */
/* Example 2: Reverse the entire container's direction */
.reversed-container {
flex-direction: row-reverse; /* Items appear in reverse visual order */
margin-top: 20px;
}
@media (max-width: 600px) {
.flex-container, .reversed-container {
flex-direction: column-reverse; /* Stack and reverse vertically */
}
.flex-item:nth-child(2), .flex-item:nth-child(3) {
order: initial; /* Reset specific order for mobile stacking */
}
}
How it works: This snippet demonstrates how to control the visual order of flex items using the `order` property and `flex-direction`. The `order` property allows individual items to be repositioned, overriding their source order. `flex-direction: row-reverse` or `column-reverse` flips the entire container's flow. Media queries can be used to dynamically adjust these properties for responsive layouts, for example, stacking items vertically in reverse order on small screens.