How to select a single child class based on its parent class on CSS and jquery?

Question

Hello im making a site where users can post something. I would like to use media queries so it can be used on mobile phones unfortunately i have to switch some div tags to change the layout.

because media query css cant change the div layout im using the jquery function insertBefore

i want to move div three before div one

this was my attempt http://jsfiddle.net/PnUTX/

$(function() {
    $(".three").insertBefore(".one");
});

too bad thats not what i want and i would like this result http://jsfiddle.net/Bvdby/

i tried looking for solutions but i only found where you toggle show/hide using $(this) but im not selecting a specific div class but every class

thanks for the help

Answer 1

Try this

$(function() {
    $(".three").each(function() {
        $(this).insertBefore($(this).siblings(".one"));
    });
});

As three elements matches .one and .three selector. All three .three elements inserted before all three .one element. (Tongue Twister ;-))