jquery - 响应式jQuery

Question

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

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

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

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

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

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

无论如何......当浏览器大于1000px时，我怎样才能让它从left-col中恢复并回到原来的位置；

这是它的一个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());
        }
    });
});

小提琴