BootstrapHow-ToBeginner · 4 min read

How to Use Order in Bootstrap Grid for Custom Layouts

In Bootstrap grid, use the order classes like order-1, order-2, etc., to change the visual order of columns. These classes let you rearrange columns on different screen sizes without changing the HTML structure.

📐

Syntax

Bootstrap uses order utility classes to control the order of grid columns. The syntax is order-{value} where {value} is a number from 0 to 12 or special keywords like first and last. You can also add breakpoints like order-sm-1 to apply order on small screens and up.

order-0 to order-12: Sets the order number, lower numbers appear first.
order-first: Moves the column to the first position.
order-last: Moves the column to the last position.
Responsive: Use breakpoint prefixes like order-md-2 to apply order on medium screens and larger.

html

<div class="row">
  <div class="col order-3">Third</div>
  <div class="col order-1">First</div>
  <div class="col order-2">Second</div>
</div>

Output

Three columns in a row displayed in order: First, Second, Third visually, even though HTML order is Third, First, Second.

💻

Example

This example shows three columns with different order classes. The visual order changes to First, Second, Third even if the HTML order is different. It also uses responsive order classes to change order on medium screens.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Order Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container mt-4">
    <div class="row">
      <div class="col bg-primary text-white order-3 order-md-1 p-3">Column 1</div>
      <div class="col bg-success text-white order-1 order-md-2 p-3">Column 2</div>
      <div class="col bg-warning text-dark order-2 order-md-3 p-3">Column 3</div>
    </div>
  </div>
</body>
</html>

Output

On small screens, columns appear in order: Column 2, Column 3, Column 1. On medium and larger screens, order changes to: Column 1, Column 2, Column 3.

⚠️

Common Pitfalls

Common mistakes when using order in Bootstrap grid include:

Not using responsive order classes, causing unexpected order on different screen sizes.
Using the same order number for multiple columns, which can cause unpredictable order.
Changing order without considering keyboard navigation and accessibility.
Forgetting that order only changes visual order, not the HTML source order.

Always test your layout on different screen sizes and with keyboard navigation.

html

<!-- Wrong: same order number -->
<div class="row">
  <div class="col order-1">Column A</div>
  <div class="col order-1">Column B</div>
  <div class="col order-2">Column C</div>
</div>

<!-- Right: unique order numbers -->
<div class="row">
  <div class="col order-1">Column A</div>
  <div class="col order-2">Column B</div>
  <div class="col order-3">Column C</div>
</div>

Output

In the wrong example, Column A and B may appear in unpredictable order. In the right example, columns appear in order A, B, C.

📊

Quick Reference

Class	Effect
order-0	Place column first (lowest order)
order-1 to order-12	Set specific order number (lower is earlier)
order-first	Move column to first position
order-last	Move column to last position
order-sm-1	Apply order 1 on small screens and up
order-md-2	Apply order 2 on medium screens and up
order-lg-3	Apply order 3 on large screens and up

✅

Key Takeaways

Use Bootstrap's order classes like order-1, order-2 to change column visual order without changing HTML.

Apply responsive order classes (e.g., order-md-1) to control order on different screen sizes.

Avoid using the same order number on multiple columns to prevent unpredictable layouts.

Remember order changes only visual placement; HTML source order stays the same.

Test your layout for accessibility and keyboard navigation after changing order.