How To Responsively Rearrange DIV Elements With CSS?

Here is a small, but useful trick that can help you. when you 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, you have to specify a container:

<div class="row order_container">
</div>

Secondly, define inner elements with appropriate classes:

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

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

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

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

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