| Interactive Media Design

Bootstrap Reordering Columns

Bootstrap also allow you to change the order of elements. Reorderingopen in new window is accomplished by using the .order- classes. These class can take a breakpoint(xs-xxl) and a number from 1 through 12. The classes .order-first and .order-last may also be used.

NOTE

Elements with no order class applied will have an order of 0

<div class="container">
  <div class="row">
    <div class="col-sm order-sm-last">First Column</div>
    <div class="col-sm order-sm-1">Second Column</div>
    <div class="col-sm order-sm-12">Third Column</div>
    <div class="col-sm order-sm-first">Fourth Column</div>
    <div class="col-sm">Fifth Column</div>
  </div>
</div>