twitter-bootstrap Migrating to Bootstrap 4 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>
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>
