jquery - 更改 div 顺序以适应响应式视口(viewport)

Question

我正在使用下面的脚本来更改两个 div 的顺序 - 我的文档的 HTML 在 div 类“bgimagescale image2”之前有一个 div 类“imagepanel ip-middle”。在小于 768 像素宽的视口(viewport)上查看时 - 我希望 div 反转。下面的脚本不会在页面加载时反转 div。仅在调整大小时 - 正如我猜想脚本指示的那样!:.bind("resize", listenWidth)。我一直无法找到在页面加载和调整大小时使用 jquery 更改 div 顺序的正确方法。非常感谢。

<script type="text/javascript">
jQuery(document).load($(window).bind("resize", listenWidth));

function listenWidth( e ) {
    if($(window).width()<767)
    {
        $("div.imagepanel.ip-middle").remove().insertAfter($("div.bgimagescale.image2"));
    } else {
        $("div.imagepanel.ip-middle").remove().insertBefore($("div.bgimagescale.image2"));
    }
}
</script>

Answer 1

一起使用load和resize，像这样:

$(window).on("load resize",function(e){