Prioritize html elements in @media queries with PHP or JS

Question

Think about having some divs in the 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 any way to sort out those divs in different media queries?

For example if device is "iPad portrait" the 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>

rc_luke · Answer 1 · 2014-02-06T00:13:45.340

1

You can use media queries in javascript, then depending on your match do different DOM manipulations. In this example if the window is less than 770px we will reverse the 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 the items however you want instead of reversing them.

You can use pretty much any media queries too, something like this might be more useful for you:

window.matchMedia("screen and (max-device-width: 480px) and (orientation: portrait)")

edited Feb 06 '14 at 00:13

answered Feb 06 '14 at 00:04

rc_luke

111
5

Thanks man! Do you have any example of sorting items instead of reversing them? – user3067592 Feb 06 '14 at 00:19
Try this post for sorting DOM nodes in JS: http://stackoverflow.com/questions/282670/easiest-way-to-sort-dom-nodes – rc_luke Feb 06 '14 at 00:23

Prioritize html elements in @media queries with PHP or JS

1 Answers1