Bootstrap - 在调整大小时从一组 div 中下移一个 div

Question

如何在超小屏幕尺寸上向下移动 div-B？ 我对 xs-hidden 和内容重复有想法，但这不是我需要的。

现在，我当前的代码是这样的：

<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2">
    A
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
    B
</div>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2">
    C
</div>

在 lg/md/sm 我有这个：

+---+---+---+
|   |   |   |
| a | b | c |
|   |   |   |
+---+---+---+

但在 xs 中我想得到这个：

+-----+-----+
|     |     |
| a   |  c  |
|     |     |
+-----+-----+
|           |
|     b     |
|           |
+-----------+

Answer 1

Bootstrap 的 col-sm 断点是 768px。

因此您可以使用$(window).width() 和两个类来移动要移动的 div，如下面的resize 处理程序示例。

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

  //console.log( $(window).width() );

  if( $(window).width() < 768 ){
    $(".movedown").before( $(".moveup") );
  }else{
    $(".moveup").before( $(".movedown") );
  }

});

div{
  border:1px solid black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2">
  A
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 movedown">
  B
</div>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 moveup">
  C
</div>

该示例在CodePen 中更容易调整大小
它在 sn-p 预览中不起作用...必须查看全页模式。