将div顺序更改以适应响应式视口

Question

我正在使用下面的脚本来改变两个div的顺序 - 我的文档HTML中有一个类为“imagepanel ip-middle”的div，它在一个名为“bgimagescale image2”的div之前。当在小于768像素的视口上查看时 - 我想要div反转。下面的脚本不会在页面加载时反转divs。只有在调整大小时才会反转 - 因为我猜测这个脚本是这样指示的！ .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>

- leclerk

Answer 1

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

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

- eclipsis

Answer 2

我需要看看你的HTML代码才能给出精确的建议，但实际上你根本不需要使用任何JavaScript。只需使用纯CSS和浮动技巧即可。首先将两个div都设置为向左浮动。

div{
  float:left;
  clear:both;
  }

当媒体发生变化时，只需将浮动更改为“right”-右浮动会颠倒元素的顺序。

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

就这些了 :)

- Stanley Mácha