order
Changes the visual order of flex/grid items differently from the DOM order. Allows controlling element placement without modifying the HTML structure.
Class List
| Class | CSS | Description |
|---|---|---|
order1 | order: 1 | placed after default order (0) |
order2 | order: 2 | placed after order1 |
order3 | order: 3 | placed after order2 |
neg-order1 | order: -1 | placed before default order |
Visual Comparison
Compares how the visual placement of items changes depending on the order value.
Default order (no order) — placed in DOM order
All items have a default order of 0, so they display in DOM order
Reorder with order value — move A to last
Visual order: B, C, A. DOM order remains unchanged
Move to front with neg-order1
Item C is placed before other items (order: 0) with order: -1
Accessibility Notes
Visual order ≠ DOM order ≠ Tab order
order only changes visual placement. Keyboard tab order and screen reader reading order still follow DOM order.
When visual order differs from tab order, it can confuse keyboard users. Prefer changing the DOM order itself when possible.
| Category | Order Basis | order Impact |
|---|---|---|
| visual placement | order value | Affected |
| keyboard tab order | DOM order | Not affected |
| screen reader reading order | DOM order | Not affected |
| JavaScript DOM API | DOM order | Not affected |
Class Details
order1order: 1
Placed after the default order (0). Used to push a specific item backward.
<!-- Move specific item to back -->
<div class="df gap8px">
<span class="order1">Item A (moved back)</span>
<span>Item B (Default order: 0)</span>
<span>Item C (Default order: 0)</span>
</div>
<!-- Result: B → C → A -->order2order: 2
Placed after order1. Used when multi-level order control is needed.
<!-- Multi-level order control -->
<div class="df gap8px">
<span class="order2">Item A (2Rank)</span>
<span class="order1">Item B (1Rank)</span>
<span>Item C (Default 0)</span>
</div>
<!-- Result: C → B → A -->order3order: 3
Placed 3 levels back. Used for complex reordering.
<!-- 3-level order -->
<div class="df gap8px">
<span class="order3">Item A (3Rank)</span>
<span class="order1">Item B (1Rank)</span>
<span class="order2">Item C (2Rank)</span>
</div>
<!-- Result: B → C → A (original order reversed) -->neg-order1order: -1
Placed before all other items (default order: 0). Most useful for pulling a specific item to the front.
<!-- Pull to front -->
<div class="df gap8px">
<span>Item A</span>
<span>Item B</span>
<span class="neg-order1">Item C (moved to front!)</span>
</div>
<!-- Result: C → A → B -->
<!-- Responsive: Main content first on mobile -->
<div class="df fdc">
<aside>Sidebar</aside>
<main class="sm-neg-order1">Main (first on mobile)</main>
</div>Responsive Order Change
Combine with media query prefixes to change order based on screen size.
<!-- Desktop: A-B-C / Mobile: C-A-B -->
<div class="df fdc sm-fdc gap16px">
<div>Item A</div>
<div>Item B</div>
<div class="sm-neg-order1">Item C (top on mobile)</div>
</div>
<!-- Sidebar: Left on desktop, below on mobile -->
<div class="df sm-fdc gap2rem">
<aside class="fs0 w25rem sm-order1">Sidebar</aside>
<main class="fg1">Main Content</main>
</div>| Class Combination | Behavior |
|---|---|
sm-order1 | pushed back below 768px |
sm-neg-order1 | moved to front below 768px |
md-order2 | pushed to second below 1024px |
order1 sm-order3 | default 1st priority, 3rd on mobile |
Tips & Notes
Use only when necessary
Overusing order causes accessibility issues due to mismatch between visual and DOM order. Prefer changing the HTML order itself.
neg-order1 is the "move to front" pattern
neg-order1 sets order: -1, always placing it before other items with the default (0). Useful for showing a specific element first on mobile in responsive layouts.
Works in both flex and grid
order works inside both df (flex) and dg (grid) containers. It has no effect on regular block elements.
Ideal for responsive layout reordering
Use sm-neg-order1 etc. to reorder so that the sidebar is on the left on desktop but main content comes first on mobile.