How can I reorder columns at different breakpoints with order-* utilities?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I reorder columns at different breakpoints with order-* utilities?

Asked on May 23, 2025

Answer

In Bootstrap 5, you can use the `order-*` utilities to change the order of columns at different breakpoints. This allows you to create responsive layouts where the order of columns changes based on the screen size.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col order-3 order-md-1">First column (order-md-1)</div>
                <div class="col order-1 order-md-2">Second column (order-md-2)</div>
                <div class="col order-2 order-md-3">Third column (order-md-3)</div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `order-*` classes are used to reorder columns. The number represents the order position.
The example uses `order-3`, `order-1`, and `order-2` for the default order, and `order-md-1`, `order-md-2`, and `order-md-3` for medium and larger screens.
This means on small screens, the columns will appear in the order: third, first, second. On medium and larger screens, they will appear in the order: first, second, third.
You can adjust the order numbers and breakpoints (`md`, `lg`, `xl`, etc.) as needed for your layout.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I reorder columns at different breakpoints with order-* utilities?

Asked on May 23, 2025

Answer

The Q&A Network