Question

Basically I want my HTML structure to be restructured when window gets smaller than lets say 400px in width.

<div id="mainContainer">
    <div id="div1"> -- Loads of content here -- </div>
    <div id="div2"> -- Even more content here -- </div>
    <div id="div3"> -- You can't even imagine how much content here -- </div>
</div>

Now, after a user resizes his/hers browser below 400px in witdh I some how need to move div3 above div1, so the structure would look like this:

<div id="mainContainer">
    <div id="div3"> -- You can't even imagine how much content here -- </div>        
    <div id="div1"> -- Loads of content here -- </div>
    <div id="div2"> -- Even more content here -- </div>
</div>

I already have, by the use of jquery, a function to mesure the width of the window. But how do I accomplish the rest? I have looked a bit at this sort of similar question, which gave me an idea of how I might be able to, but it didn’t quiet help me out.

Any suggestions?

Answer 1

http://jsfiddle.net/tMutA/1/

You should maybe instead define a set of index parameters on different size and then run an sortby instead.

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

if(screenWidth < 600) {
    $('#div3').prependTo($('#mainContainer'));
}

$(window).resize(function() {
var screenWidth = $(window).width();

if(screenWidth < 600) {
    $('#div3').prependTo($('#mainContainer'));
} else {
    $('#div2').prependTo($('#mainContainer'));
    $('#div1').prependTo($('#mainContainer'));
}

});