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)")
Comments
Post a Comment