How can we do "Responsively Rearrange/Reorder DIV elements" using CSS?

It is a small, but very useful trick that can help us. when we want to change order of elements on the page on mobile devices. Of course, it may be used for any other purposes.

First of all, we have to specify a container:

?

1 2	<div class="row order_container_main"> </div>

Secondly, we have to define inner elements with appropriate classes.

?

1 2 3 4

<div class="row order_container_main">  <div class="col-md-6">DIV #1</div>  <div class="col-md-6">DIV #2</div> </div>

As we can see the default order is following: DIV #1 and then DIV #2 But how can we change this order on mobile devices? It is very simple. Add for each element class for order and define its as following.

CSS:

?

1 2 3 4 5 6 7

@media screen and (max-width: 786px) {  .order_container_main { display: flex; flex-flow: column; }  .order4 { order: 4; }  .order3 { order: 3; }  .order2 { order: 2; }  .order1 { order: 1; } }

HTML:

?

1 2 3 4

<div class="row order_container_main">  <div class="col-md-6 order2">DIV #1</div>  <div class="col-md-6 order1">DIV #2</div> </div>

Now in mobile the order of elements will be following: DIV #2 and then DIV #1