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

【问题标题】：Change div order to suite responsive viewport将 div 顺序更改为套件响应式视口
【发布时间】：2015-01-10 04:17:30
【问题描述】：

我正在使用下面的脚本来更改两个 div 的顺序 - 我的文档的 HTML 在 div 类“bgimagescale image2”之前有一个 div 类“imagepanel ip-middle”。在小于 768px 宽的视口上查看时 - 我希望 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>

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

将load 和resize 一起使用，如下所示：

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

【讨论】：

【解决方案2】：

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

div{
  float:left;
  clear:both;
  }

在媒体更改时，只需将浮动更改为“右” - 右浮动会反转元素的顺序。

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

就是这样:)

【讨论】：