javascript - Prioritize html elements in @media queries with PHP or JS -

think having divs in page

<div id="1"> <div class="2">content</div> <div class="3">content</div> <div class="4">content</div> <div class="5">content</div> </div> 

is there way sort out divs in different media queries?

for example if device "ipad portrait" code should be;

<div id="1">     <div class="5">content</div>     <div class="2">content</div>     <div class="4">content</div>     <div class="3">content</div>     </div> 

you can use media queries in javascript, depending on match different dom manipulations. in example if window less 770px reverse order using jquery.

var mediaquery = window.matchmedia( "(max-width: 770px)" ); if ( mediaquery.matches ) {     var container = $('#1');     var items = container.children('div');     container.append( items.get().reverse() ); } 

you can of course sort items want instead of reversing them.

you can use pretty media queries too, might more useful you:

window.matchmedia("screen , (max-device-width: 480px) , (orientation: portrait)")