CSS
Dynamically Reorder Flex Items with 'order'
Learn to visually reorder items within a Flexbox container using the 'order' property, ideal for adapting layouts for different screen sizes or accessibility needs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Order Reordering</title>
<style>
.flex-container {
display: flex;
border: 2px solid #333;
padding: 10px;
margin-bottom: 20px;
}
.flex-item {
background-color: lightblue;
border: 1px solid #666;
padding: 20px;
margin: 5px;
text-align: center;
}
/* Default order (DOM order) */
.flex-container.default .item-1 { order: 1; }
.flex-container.default .item-2 { order: 2; }
.flex-container.default .item-3 { order: 3; }
/* Custom order */
.flex-container.custom .item-1 { order: 3; /* Appears last */ }
.flex-container.custom .item-2 { order: 1; /* Appears first */ }
.flex-container.custom .item-3 { order: 2; /* Appears middle */ }
@media (max-width: 600px) {
.flex-container.responsive .item-1 { order: 2; }
.flex-container.responsive .item-2 { order: 1; }
.flex-container.responsive .item-3 { order: 3; }
}
</style>
</head>
<body>
<h1>Flexbox Item Reordering</h1>
<h2>Default Order (DOM Order)</h2>
<div class="flex-container default">
<div class="flex-item item-1">Item 1</div>
<div class="flex-item item-2">Item 2</div>
<div class="flex-item item-3">Item 3</div>
</div>
<h2>Custom Order (2, 3, 1)</h2>
<div class="flex-container custom">
<div class="flex-item item-1">Item 1</div>
<div class="flex-item item-2">Item 2</div>
<div class="flex-item item-3">Item 3</div>
</div>
<h2>Responsive Order (2, 1, 3 on small screens)</h2>
<p>Resize your browser window to see the change.</p>
<div class="flex-container responsive">
<div class="flex-item item-1">Item 1</div>
<div class="flex-item item-2">Item 2</div>
<div class="flex-item item-3">Item 3</div>
</div>
</body>
</html>
How it works: This snippet demonstrates how to control the visual order of flex items using the `order` CSS property. By default, flex items are arranged in the source (DOM) order. Assigning an `order` value (e.g., `order: 1`, `order: 2`) allows you to override this. Items with lower `order` values appear first. This is particularly useful for responsive design, enabling you to change the layout flow on different screen sizes without altering the HTML structure, which is crucial for accessibility and SEO.