在窗口调整大小时将div从另一个下方移动到上面

Question

我有两个div，A和B. B在A下。当我将窗口垂直调整得足够窄时，是否可以将它放在A之上？可以通过隐藏/显示基于大小的div来模拟吗？

Answer 1

您所谈论的问题广为人知responsive design。

示例代码演示了您的问题的可能解决方案如下所示。它在resize元素上使用window事件，然后根据实际窗口宽度隐藏所选元素。 redesign方法最终应包含任何适当的逻辑，根据其实际宽度设计视图：

$(document).ready(function () {
    redesign();
    $(window).resize(function(){
        redesign();
    });
});

function redesign(){
    if ($(window).width() < 640) {
        $("#divA").hide();
    }else{
        $("#divA").show();
    }
}

查看jsFiddle示例（显然调整窗口大小以查看一些结果）。如果您有兴趣将DOM元素相互关联，请检查jquery insertBefore方法。