You can even change the visual order of your grid columns without changing their order in actual markup. Use the class .order-last to order the column in last, whereas use the class .order-first to order the column at first place. Let’s checkout an example:

Example

<div class="container">
    <div class="row">
        <div class="col order-last">First, but ordered at last</div>
        <div class="col">Second, but unordered</div>
        <div class="col order-first">Last, but ordered at first</div>
    </div>
</div>

You can also use the .order-* classes to order the grid columns depending on the order numbers. Grid column with higher order number comes after the grid column with lower order number or grid column with no order classes. It includes support for 1 through 12 across all five grid tiers.

Example

<div class="container">
    <div class="row">
        <div class="col order-4">First, but ordered at last</div>
        <div class="col">Second, but ordered at first</div>
        <div class="col order-1">Last, but ordered at second</div>
    </div>
</div>

Offsetting the Grid Columns

You can also move grid columns to the right for alignment purpose using the column offset classes like .offset-sm-*, .offset-md-*, .offset-lg-*, and so on.

These classes offset the columns by simply increasing its left margin by specified number of columns. For example, the class .offset-md-4 on column .col-md-8 moves it to the right over four columns from its original position. Try out the following example to see how it works:

Example

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
    </div>
    <div class="row">        
        <div class="col-sm-8 offset-sm-4"><!--Column with 4 columns offset--></div>
    </div>
</div>

You can also offset columns using the margin utility classes. These classes are useful in the situations where the width of the offset is not fixed. Here’s an example:

Example

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 ms-auto"><!--Offset this column to right--></div>
    </div>
    <div class="row">
        <div class="col-auto me-auto"></div>
        <div class="col-auto"><!--Move this column away from previous column--></div>
    </div>
</div>

Note: You can use the class .col-auto to create columns that only take up as much space as needed, i.e. the column sizes itself based on the contents.