jquery - Change div order on smaller screens -

i trying change div orders in new opencart 2.0 template, add cart button appears above product description when using smaller screens.

this tried doesn't seem work

css:

@media screen , (max-width:767px){     #parent{         display:flex;         flex-flow: column;     }     #a{order:1;}     #b{order:3;}     #c{order:4;}     #d{order:5;}     #e{order:2;} } 

html:

 <div id="parent">     <div class="col-sm-8">       <ul class="thumbnails" id="a"></ul>       <ul class="nav nav-tabs" id="b"></ul>       <div class="tab-content" id="c"></div>    </div>     <div class="col-sm-4" id="d">       <div class="main-product-info" id="e"></div>    </div>   </div> 

basically main-product-info div needs go above nav-tabs nav.

also tried putting parent div below col-sm-8 page messed up...

any suggestions highly appreciated!

thanks!

you can using jquery functions : append(); before(); after();

first, window width:

var screenwidth = $(window).width(); 

second, create condition:

 if (screenwidth <= 767) {          $('#b').before($('#e'));         } else {     return false;} 

thats all.