Bootstrap Push Pull Order Classes | change div order responsive

How to change the order of DIV in Bootstrap using Bootstrap Push Pull Order Classes. Change column order of using order utility classes as you were able to do it. Using bootstrap’s push and pull classes change the order you want it to appear on mobile device or tablet.

Suspendisse malesuada nunc pretium id faucibus a. Lobortis pellentesque facilisis risus habitant. Mollis adipiscing iaculis quam mi pellentesque consectetur. Sit diam eleifend risus eget commodo adipiscing. Amet, nibh morbi ut sed interdum pharetra tincidunt quisque. Viverra hac imperdiet diam posuere ac. Justo, sit tincidunt laoreet a placerat.

Bootstrap swap div order example (resize window to check bellow example)

<div class="row">
  <div class="col-lg-3 order-2 order-lg-12">
    1
  </div>
  <div class="col-lg-6 order-1 order-lg-12">
    2
  </div>
  <div class="col-lg-3 order-3 order-lg-12">
    3
  </div>
</div>

Bootstrap Push Pull Order Classes with example

Example of above the change column order on mobile device, on mobile DIV 2 show first column and DIV 1 show second column and DIV 3 at show on last. order-1, order-2, order-3 use this bootstrap utility’s to change the order of any column according to requirement.

Change div order responsive mobile

Based on the Bootstrap Grid in the various viewport sizes re-order columns by adding a simple class without using Flexbox. Bootstrap 4 Push Pull Order Classes allow us to change the order of our grid based on requirement. The push and pull classes applied to the Bootstrap classes easily to change the order of column in mobile devices. Change Columns order using Bootstrap Push and Pull Classes are very useful to used to float an element to the left or right on the various viewport sizes. If you have two columns which I want to swap the order of the column use Bootstrap Push and Pull Classes.