Question

Need some help, and advice.
Long story short i have a 3 column website.

<div id="left-col">Some content</div>
<div id="mid-col">Some content</div>
<div id="right-col">Some content</div>

When a browser window goes below 1000px, i do the following.

$(window).on('resize', function () {

if ($(window).width() < 1000) {         
    $("#right-col").appendTo('#left-col');
    $("#mid-col").css("max-width","785px");
}
});

Now using appendTo isnt the best solution because it takes the entire <div id=”right-col”> and places it within the div. My initial want was to just move the html within right-col and append that to the end of left-col.

Regardless…
How can i get it to snap back out of left-col and go back to it’s original place when the browser is greater than 1000px;

Here’s a jsfiddle of it. http://jsfiddle.net/C7k5b/

Answer 1

Could’nt you just append it back again ?

$(document).ready(function() {
    $(window).on('resize', function () {
        if ($(window).width() < 500) {      
            $("#right-col").appendTo('#left-col');
        }else{
            $("#right-col").appendTo($('#left-col').parent());
        }
    });
});

FIDDLE