Prev Next

Order Classes: Changing the Order of Columns with order-* Classes

Bootstrap 5 provides order-* utility classes to change the visual order of columns in a grid layout without altering the HTML structure. You can specify the order for specific breakpoints or apply it globally.

Key Topics

Basic Ordering with order-* Classes

Use order-* classes to reorder columns. The classes range from order-1 to order-5, with order-0 being the default.

<div class="container">
    <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>
</div>

Explanation: The order-* classes change the visual order of columns, as demonstrated by assigning order-3, order-1, and order-2 to the columns.

Responsive Ordering

Specify different orders for various breakpoints using classes like order-sm-*, order-md-*, etc.

<div class="container">
    <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>
</div>

Explanation: The order-md-* classes reorder columns on medium devices, while maintaining the default order on smaller screens.

Custom Order with order-0

Use order-0 to reset the default order of columns, even if other order classes are applied.

<div class="container">
    <div class="row">
        <div class="col order-3">Third</div>
        <div class="col order-0">Default Order</div>
        <div class="col order-1">First</div>
    </div>
</div>

Explanation: The order-0 class resets the column to its default order, overriding other order classes.

Complete Order Classes Example

The following is a complete example demonstrating various use cases of order-* classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Order Classes Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Order Classes</h2>
        <div class="row mb-3">
            <div class="col order-3">Third</div>
            <div class="col order-1">First</div>
            <div class="col order-2">Second</div>
        </div>
        <div class="row mb-3">
            <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>
        <div class="row">
            <div class="col order-3">Third</div>
            <div class="col order-0">Default Order</div>
            <div class="col order-1">First</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates the flexibility of the order-* classes to reorder grid columns dynamically for various screen sizes.

Key Takeaways

  • Use order-* to reorder columns visually without modifying the HTML structure.
  • Apply breakpoint-specific classes like order-md-* for responsive reordering.
  • Use order-0 to reset the default order.
Prev Next