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:

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

 
DIV #1
 
DIV #2

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:

@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:

 
DIV #1
 
DIV #2

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