Bootstrap 5 Columns Reordering Order Classes

Bootstrap 5 Columns Reordering Order Classes are used to set the visual order of the columns inside a row irrespective of their position in the Document Object Model. 

Bootstrap 5 Columns Reordering Order Classes:

• order-*: This class is used to set the visual order of columns in a row.
• order-**-*: This class sets the visual order of columns for various screen sizes in a row.
• order-first: This class is used to forcefully set the order of a column to the first in the row.
• order-last: This class is used to forcefully set the order of a column to the last in the row.

Note: * can be a number from 0-5 and ** replace the screen size like "sm", "md", "lg", "xl", "xxl".

 

Syntax:

<div class="row">
 <div class="col order-3">...</div>
 ...
</div>

Example 1: In this example, we used the order classes to change the visual orders of the columns in a row.

Output:

👁 Image

Example 2: In this example, we used the order-first and order-last classes to set the first and last columns in the row forcefully.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.2/layout/columns/#order-classes