Question

我使用下面的脚本来更改两个div的顺序 - 我的文档的HTML有div类＆＃34; imagepanel ip-middle＆＃34;在div类之前＆＃34; bgimagescale image2＆＃34;。在小于768px宽的视口上查看时 - 我想要反转div。下面的脚本不会反转页面加载时的div。仅在调整大小时 - 因为我猜脚本指示！：.bind（＆＃34; resize＆＃34;，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

我需要看到你的HTML也给你提供准确的建议，但实际上你根本不需要任何js。只需使用纯粹的CSS和浮动的小技巧。首先将两个div设置为向左浮动。

＆＃13;

div{
  float:left;
  clear:both;
  }

＆＃13;

并且在媒体更改时，只需将浮动更改为＆＃34;右键＆＃34; - 右浮动反转元素的顺序。

＆＃13;

@media (max-width < 767px){
  div{ float:right }
  }

＆＃13;

全部：）

Answer 2

同时使用load和resize，如下所示：

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

将div顺序更改为套件响应式视口

2 个答案: