响应式jquery

Question

需要一些帮助和建议。长话短说，我有一个3栏的网站。

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

当浏览器窗口低于1000px时，我会执行以下操作。

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

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

现在，使用appendTo并不是最好的解决方案，因为它获取整个并将其放在div中。我最初的想法是在right-col中移动html，并将其附加到left-col的末尾。

不管怎样..。当浏览器大于1000px时，怎样才能让它从左栏跳回原来的位置；

这是它的一个jsfiddle。http://jsfiddle.net/C7k5b/

Answer 1

你就不能把它再加回去吗？

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