Stats

Contributors: 1 Tuesday, March 28, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial: riptutorial@gmail.com
Roadmap: roadmap

Bootstrap 4 Column Order

Example

Changing the order (or position) was possible in Bootstrap 3 using the push pull classes. In Bootstrap 4, the push pull classes still work, and additionally flexbox order can be used.

In Bootstrap 4, the push pull classes are now push-{viewport}-{units} and pull-{viewport}-{units} and the xs- infix has been removed. Consider this example that changes the column order to 1-3-2 layout on xs and sm:

<div class="row">
    <div class="col-3 col-md-6">
        1
    </div>
    <div class="col-3 col-md-6 push-6 push-md-0">
        2
    </div>
    <div class="col-6 col-md-12 pull-3 pull-md-0">
        3
    </div>
</div>

Bootstrap 4 Push Pull Demo


Since the new version 4 is flexbox, another option is to use the flexbox utility classes to change the order of columns. Now full width, 12 unit col-*-12 columns can be reversed using flexbox ordering.

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Flexbox Ordering Demo