css - Invert sites div position without changing HTML code -

i have example:

https://jsfiddle.net/vz9cean1/

this code html:

<div class="patrat1"></div> <div class="patrat2"></div> 

this code css:

.patrat1 {     width:100px;     height:100px;     background:blue; } .patrat2 {     width:100px;     height:100px;     background:red; }  @media screen , (max-width: 700px) {             //some code reverse div   } 

how can when window less 700px squares change position in between? red above , blue below.

this done without changing html, css only.

http://i60.tinypic.com/x5tg6v.jpg put picture understand better

thanks in advance!

afaik way switch position vertically use flex container.

css:

.container {   display: flex;   flex-direction: column; }  .patrat1 {     width:100px;     height:100px;     background:blue;      order: 0; } .patrat2 {     width:100px;     height:100px;     background:red; }  @media screen , (max-width: 700px) {   .patrat1 {     order: 1;   } } 

html:

<div class="container">   <div class="patrat1"></div>   <div class="patrat2"></div> </div> 

live example: http://www.cssdesk.com/usgck

edit: note may need add vendor prefixes, according can use: http://caniuse.com/#search=flex