CSS
Reorder Flexbox Items Responsively Using the `order` Property
Dynamically change the visual order of elements in a Flexbox container based on screen size, utilizing the `order` CSS property to adapt layouts for better user experience or content prioritization.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Order Property</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
background-color: #f8f8f8;
}
.flex-container {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to next line */
gap: 15px;
padding: 20px;
border: 2px dashed #ccc;
background-color: white;
border-radius: 8px;
}
.flex-item {
flex: 1 1 200px; /* Grow, shrink, initial basis */
background-color: #6a82fb;
color: white;
padding: 30px;
text-align: center;
border-radius: 5px;
font-size: 1.2em;
font-weight: bold;
min-width: 150px; /* Ensure items don't get too small */
}
/* Default order (large screens) */
.item-a { order: 1; background-color: #f7a399; }
.item-b { order: 2; background-color: #b7d7ea; }
.item-c { order: 3; background-color: #add8e6; }
.item-d { order: 4; background-color: #fce77a; }
/* Reorder for smaller screens */
@media (max-width: 768px) {
.flex-item {
flex-basis: 100%; /* Make items stack vertically */
}
.item-a { order: 2; } /* A becomes second */
.item-b { order: 4; } /* B becomes fourth */
.item-c { order: 1; } /* C becomes first */
.item-d { order: 3; } /* D becomes third */
}
</style>
</head>
<body>
<h1>Flexbox Item Reordering</h1>
<p>Resize your browser to see the order of the items change.</p>
<div class="flex-container">
<div class="flex-item item-a">Item A (Default Order 1)</div>
<div class="flex-item item-b">Item B (Default Order 2)</div>
<div class="flex-item item-c">Item C (Default Order 3)</div>
<div class="flex-item item-d">Item D (Default Order 4)</div>
</div>
</body>
</html>
How it works: This snippet illustrates how to reorder flex items dynamically using the `order` CSS property. Each `flex-item` is assigned a default `order` value. Within a media query, these `order` values are changed, causing the visual arrangement of the items to shift without altering their source HTML order. This is highly useful for responsive design, allowing you to prioritize or re-sequence content based on screen size.