[Solved] Change structure of html with jQuery when responsive

Question

So, what you want is to reorder the elements when the window is resized, right?

You can try the following code…

$(function() {

var screenBig = $(window).width() >= 640;

$(window).resize(function() {
    if($(window).width() < 640 && screenBig) {
        resizeSmall();
        screenBig = false;
    } else if($(window).width() >= 640 && !screenBig) {
        resizeBig();
        screenBig = true;
    }
});

var resizeSmall = function() {
    var orig = $('.people_row');
    orig.append(orig.find('.single_person.0'));
    orig.append(orig.find('.single_person.1'));
    orig.append(orig.find('.single_person.2'));
    orig.append(orig.find('.info_block.0'));
    orig.append(orig.find('.info_block.1'));
    orig.append(orig.find('.info_block.2'));
    orig.append(orig.find('.single_person.3'));
    orig.append(orig.find('.single_person.4'));
    orig.append(orig.find('.single_person.5'));
    orig.append(orig.find('.info_block.3'));
    orig.append(orig.find('.info_block.4'));
    orig.append(orig.find('.info_block.5'));
    orig.append(orig.find('.single_person.6'));
    orig.append(orig.find('.single_person.7'));
    orig.append(orig.find('.single_person.8'));
    orig.append(orig.find('.info_block.6'));
    orig.append(orig.find('.info_block.7'));
    orig.append(orig.find('.info_block.8'));
    orig.append(orig.find('.single_person.9'));
    orig.append(orig.find('.single_person.10'));
    orig.append(orig.find('.single_person.11'));
    orig.append(orig.find('.info_block.9'));
    orig.append(orig.find('.info_block.10'));
    orig.append(orig.find('.info_block.11'));
}

var resizeBig = function() {
    var orig = $('.people_row');
    orig.append(orig.find('.single_person.0'));
    orig.append(orig.find('.single_person.1'));
    orig.append(orig.find('.single_person.2'));
    orig.append(orig.find('.single_person.3'));
    orig.append(orig.find('.single_person.4'));
    orig.append(orig.find('.single_person.5'));
    orig.append(orig.find('.single_person.6'));
    orig.append(orig.find('.single_person.7'));
    orig.append(orig.find('.single_person.8'));
    orig.append(orig.find('.single_person.9'));
    orig.append(orig.find('.single_person.10'));
    orig.append(orig.find('.single_person.11'));
    orig.append(orig.find('.info_block.0'));
    orig.append(orig.find('.info_block.1'));
    orig.append(orig.find('.info_block.2'));
    orig.append(orig.find('.info_block.3'));
    orig.append(orig.find('.info_block.4'));
    orig.append(orig.find('.info_block.5'));
    orig.append(orig.find('.info_block.6'));
    orig.append(orig.find('.info_block.7'));
    orig.append(orig.find('.info_block.8'));
    orig.append(orig.find('.info_block.9'));
    orig.append(orig.find('.info_block.10'));
    orig.append(orig.find('.info_block.11'));

}
});

I haven’t tested it but you should get the point 😉

Basically, it adds a listener to the window resize event, and when CHANGES to more than 640px or less than 640px it runs the corresponding function.

That’s why the screenBig variable is there, to avoid running the resize functions in each resize (i.e. resizing from 1000px to 900px does not need executing the function).

The functions just reorders your elements as you want.

Also, you can try a framework for responsive design, but if you just want simple things, this should work ^^

Accepted Answer