Bootstrap 4 Column Order

Download twitter-bootstrap eBook


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">
    <div class="col-3 col-md-6 push-6 push-md-0">
    <div class="col-6 col-md-12 pull-3 pull-md-0">

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 class="col-md-12 flex-first flex-md-unordered">
        Col 2

Flexbox Ordering Demo


Contributors: 1
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial:

Download eBook