Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Column Reordering in Bootstrap 5
Column Reordering: Change the visual order of columns without changing HTML structure.
What is Column Reordering?
Column reordering allows you to change how columns appear visually, independent of their order in the HTML source. This is useful for responsive design and accessibility.
HTML Order
Column A (HTML: 1st)
Column B (HTML: 2nd)
Column C (HTML: 3rd)
Columns appear in HTML source order.
Reordered
Column A (Visual: 3rd)
Column B (Visual: 1st)
Column C (Visual: 2nd)
Columns appear in specified visual order.
Order Classes
Basic Order Classes
| Class | Effect | Example |
|---|---|---|
order-first | Makes column appear first | Visual order: 1 |
order-last | Makes column appear last | Visual order: Last |
order-0 | Natural order (default) | Visual order: HTML order |
order-1 to order-5 | Specific order position | 1 = first, 5 = last |
.order-3
Appears third
Appears third
.order-1
Appears first
Appears first
.order-2
Appears second
Appears second
<div class="row">
<div class="col order-3">Appears third</div>
<div class="col order-1">Appears first</div>
<div class="col order-2">Appears second</div>
</div>Responsive Order Classes
Breakpoint-based Ordering
Example: Different Order on Different Screens
.order-md-1
First on desktop
First on desktop
.order-md-3
Last on desktop
Last on desktop
.order-md-2
Middle on desktop
Middle on desktop
| Screen Size | Classes Applied | Visual Order |
|---|---|---|
| Mobile (<768px) | No order classes | HTML order (1, 2, 3) |
| Desktop (≥768px) | order-md-* | Specified order (1, 3, 2) |
<div class="row">
<div class="col-md-4 order-md-1">First on desktop</div>
<div class="col-md-4 order-md-3">Last on desktop</div>
<div class="col-md-4 order-md-2">Middle on desktop</div>
</div>Order-first and Order-last
Quick Reordering Shortcuts
Using order-first
Column 1 (HTML first)
Column 2 (HTML second)
.order-first
Column 3 (HTML third, Visual first)
Column 3 (HTML third, Visual first)
Using order-last
.order-last
Column 1 (HTML first, Visual last)
Column 1 (HTML first, Visual last)
Column 2 (HTML second)
Column 3 (HTML third)
<!-- Make last column appear first -->
<div class="row">
<div class="col">1st in HTML</div>
<div class="col">2nd in HTML</div>
<div class="col order-first">3rd in HTML, 1st visually</div>
</div>
<!-- Make first column appear last -->
<div class="row">
<div class="col order-last">1st in HTML, last visually</div>
<div class="col">2nd in HTML</div>
<div class="col">3rd in HTML</div>
</div>Offset vs Order
Offset Classes
Offset moves columns to the right by adding empty space.
.offset-4
<div class="row">
<div class="col-4 offset-4">
<!-- Centered with empty space -->
</div>
</div>Use case: Centering elements, creating gaps.
Order Classes
Order changes visual sequence without moving position.
.order-2
.order-1
<div class="row">
<div class="col-4 order-2">Appears second</div>
<div class="col-4 order-1">Appears first</div>
</div>Use case: Changing visual hierarchy, responsive reordering.
Practical Examples
Real-World Use Cases
Example 1: Mobile-First Navigation
Logo
.order-md-2
.order-md-2
Navigation
.order-md-1 (First on desktop)
.order-md-1 (First on desktop)
Search
.order-md-3
.order-md-3
| Screen | Visual Order | Reason |
|---|---|---|
| Mobile | Logo, Search, Navigation (full width) | Logo and search visible, nav in hamburger |
| Desktop | Navigation, Logo, Search | Navigation first for usability |
Example 2: Feature Section with Image
Image/Illustration
Appears on right on desktop
Content
Appears on left on desktop (better for reading flow)
On mobile: Content appears first, image second.
<!-- Image right, content left on desktop -->
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<!-- Image (right on desktop) -->
</div>
<div class="col-md-6 order-md-1">
<!-- Content (left on desktop) -->
</div>
</div>Advanced Order Patterns
Pattern 1: Zigzag Layout
Image Left
Content Right
Content Left
Image Right
Alternating image/content layout for visual interest.
Pattern 2: Priority Content
Main Content
Sidebar (top on mobile)
Sidebar appears first on mobile, second on desktop.
Pattern 3: Call-to-Action Focus
Header
CTA Button
Content
CTA appears last for better conversion.
Responsive Reordering Strategies
Mobile-First Reordering
Strategy 1: Content Priority
- Most important content first on mobile
- Use
order-md-*for desktop layout - Keep navigation accessible
<!-- Content first on mobile -->
<div class="row">
<div class="col-md-8 order-md-2">
<!-- Main content (right on desktop) -->
</div>
<div class="col-md-4 order-md-1">
<!-- Sidebar (left on desktop) -->
</div>
</div>Strategy 2: Visual Hierarchy
- Different visual flow on different devices
- Consider reading patterns
- Maintain logical structure
<!-- Different visual flow -->
<div class="row">
<div class="col-md-4 order-md-3">
<!-- Last on desktop -->
</div>
<div class="col-md-4 order-md-1">
<!-- First on desktop -->
</div>
<div class="col-md-4 order-md-2">
<!-- Middle on desktop -->
</div>
</div>Accessibility Considerations
Important Accessibility Notes
- Screen readers follow HTML source order, not visual order
- Don't use order classes to fix semantic issues
- Ensure logical reading order in HTML
- Test with screen readers if reordering significantly
- Consider keyboard navigation flow
Common Order Class Combinations
| Scenario | Mobile | Desktop | Classes |
|---|---|---|---|
| Image right, content left | Content → Image | Content ← Image | order-md-2 on image |
| Sidebar right on desktop | Sidebar first | Sidebar last | order-md-last on sidebar |
| Featured item first | Item last | Item first | order-last order-md-first |
| Three column shuffle | A, B, C | B, C, A | order-md-2, order-md-3, order-md-1 |
Troubleshooting Common Issues
| Issue | Cause | Solution |
|---|---|---|
| Order not working | Missing .row wrapper | Ensure columns are inside .row |
| Responsive order not applying | Wrong breakpoint class | Use correct breakpoint (md, lg, etc.) |
| Columns overlapping | Total order values conflict | Use unique order values (1, 2, 3, etc.) |
| Mobile layout broken | Missing mobile column classes | Add col-12 or similar for mobile |
Best Practices for Column Reordering
- ✅ Use for visual presentation, not semantic structure
- ✅ Test on multiple screen sizes
- ✅ Keep HTML in logical reading order
- ✅ Use responsive order classes for mobile-first design
- ✅ Document complex reordering patterns
- ✅ Consider accessibility implications
