Element Order

Element Order

Flexbox lets you visually reorder elements without changing the HTML structure. The order property controls the display order of flex items, which is incredibly useful for responsive design.

The order Property

.item {
    order: 0;  /* Default — items appear in HTML source order */
}

Items are sorted in ascending order value. Items with the same order appear in their HTML source order.

Basic Reordering

<div class="container">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
</div>

.container { display: flex; }

/* Default order: A, B, C */

.a { order: 3; }  /* A goes last */
.b { order: 1; }  /* B goes first */
.c { order: 2; }  /* C goes second */

/* Visual order: B, C, A */

How Ordering Works

order Value	Position
-1	Before all default items
0 (default)	Normal position
1	After all default items
2, 3, etc.	Further toward the end

/* Move one item to the front */
.featured { order: -1; }

/* Move one item to the end */
.secondary { order: 1; }

Responsive Reordering

The most powerful use of order — reorder elements at different screen sizes:

<div class="page-layout">
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <aside class="ads">Ads</aside>
</div>

.page-layout {
    display: flex;
    gap: 20px;
}

/* Desktop: Sidebar | Main | Ads */
.sidebar { flex: 0 0 200px; order: 1; }
.main    { flex: 1;         order: 2; }
.ads     { flex: 0 0 160px; order: 3; }

/* Mobile: Main first, then Sidebar, then Ads */
@media (max-width: 768px) {
    .page-layout {
        flex-direction: column;
    }
    .main    { order: 1; }  /* Main content first on mobile */
    .sidebar { order: 2; }  /* Sidebar below main */
    .ads     { order: 3; }  /* Ads at the very bottom */
}

Practical Example: Mobile-First Card

<div class="feature-card">
    <div class="feature-img">Image</div>
    <div class="feature-text">
        <h3>Feature Title</h3>
        <p>Description text goes here.</p>
    </div>
</div>

.feature-card {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Desktop: alternating left/right images */
.feature-card:nth-child(even) .feature-img {
    order: 2;  /* Image on the right for even cards */
}

.feature-card:nth-child(even) .feature-text {
    order: 1;  /* Text on the left for even cards */
}

/* Mobile: image always on top */
@media (max-width: 768px) {
    .feature-card {
        flex-direction: column;
    }
    .feature-img  { order: 1; }
    .feature-text { order: 2; }
}

Accessibility Warning

Important: The order property only changes the visual order. Screen readers and keyboard navigation still follow the HTML source order.

• ✅ Use order for visual tweaks where the logical reading order doesn't change
• ❌ Don't use order to rearrange content that should be read in a specific sequence
• ✅ The HTML should always make sense on its own

order vs HTML Order

Approach	When to Use
Change the HTML	When the logical reading order should actually change
Use order	Visual adjustments for responsiveness — same logical content flow

Key Takeaways

• order changes the visual display order without changing the HTML
• Default is 0 — lower values appear first, higher values appear last
• Use negative values (-1) to move items to the front
• Most powerful for responsive reordering — show main content first on mobile
• Accessibility: order doesn't affect screen readers or tab order
• Always ensure the HTML source order makes logical sense