0
0
Bootsrapmarkup~5 mins

Column ordering in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Column ordering lets you change the order of columns on a webpage without changing the HTML. This helps make your layout look good on different screen sizes.

You want the columns to appear in a different order on mobile than on desktop.
You need to highlight a specific column first on small screens.
You want to rearrange content visually without changing the source code.
You want to improve readability by changing column order on tablets.
You want to keep your HTML simple but control layout order with CSS.
Syntax
Bootsrap
Use Bootstrap classes like .order-0, .order-1, ..., .order-5 on columns.
You can also use responsive classes like .order-md-1 to change order on medium screens and up.

Lower order numbers appear first, higher numbers appear later.

Responsive order classes let you change order at different screen sizes.

Examples
This makes the second column appear second, the first column first, and the third column last.
Bootsrap
<div class="row">
  <div class="col order-2">Second column</div>
  <div class="col order-1">First column</div>
  <div class="col order-3">Third column</div>
</div>
On medium screens and larger, columns reorder as 1, 2, 3. On smaller screens, they keep their original order.
Bootsrap
<div class="row">
  <div class="col order-md-3">Third on medium+</div>
  <div class="col order-md-1">First on medium+</div>
  <div class="col order-md-2">Second on medium+</div>
</div>
Sample Program

This example shows three columns with different order classes for medium screens and larger. On small screens, columns appear in HTML order. On medium and larger, columns reorder as 2, 3, 1 visually.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Column Ordering Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Column Ordering Demo</h1>
    <p>Resize the browser to see column order change on medium screens and up.</p>
    <div class="row border p-3">
      <div class="col bg-primary text-white order-md-3 p-3">Column 1 (order-md-3)</div>
      <div class="col bg-success text-white order-md-1 p-3">Column 2 (order-md-1)</div>
      <div class="col bg-warning text-dark order-md-2 p-3">Column 3 (order-md-2)</div>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Order classes only change visual order, not the reading order for screen readers.

Use order classes carefully to keep your page accessible and logical.

Combine with responsive classes to make layouts adapt well on all devices.

Summary

Column ordering changes the visual order of columns without changing HTML.

Use Bootstrap's .order-* classes to set order numbers.

Responsive order classes let you reorder columns on different screen sizes.