Moving Elements in DOM for Responsive Web Design

You can try this:

Assuming this HTML:

<div id="some_container">
    <nav id="n1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
    <p>Some Text</p>
    <nav id="n2">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
</div>

You will only need the following css:

#n1{
    display:none;
}

@media only screen 
and (min-width : 600px) {
    #n1{
        display:block;
    }
    #n2{
        display:none;
    }
}

Fiddle example

This basically toggles which of the two navigation sections you see, depending on the screen size. It has the disadvantage of duplicated html in your source (the difference in the amount of data is really negligible), but you won't need JavaScript to get the effect, and JS disabled devices will only show one ul.

The great thing about this way is that it's very scale-able. Need this "effect" on a different page? You'll only have to edit [u]that[/u] page. No messing around with JavaScript, hard-coding new classes / cases.

I would suggest you use .insertAfter() and .resize()/.ready() to move the elements based on the page size:

$(window).resize(){
    resize();
}

$(document).ready(){
    resize();
}

function resize(){
    if($(window).width() < 480)
    {
        //Mobile
        $("#some_container nav").insertAfter("#some_container p");
    }
    else if($(window).width() < 800)
    {
        //Tablet
        $("#some_container nav").insertAfter("#some_container p");
    }
    else
    {
        //Desktop
        //Leave original layout
    }
}