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处理程序示例一样。

＆＃13;

$(window).on("resize",function(){

  //console.log( $(window).width() );

  if( $(window).width() < 768 ){
    $(".movedown").before( $(".moveup") );
  }else{
    $(".moveup").before( $(".movedown") );
  }

});

＆＃13;

div{
  border:1px solid black;
}

＆＃13;

<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>

＆＃13;

该示例在CodePen中更容易调整大小 它在片段预览中无效...必须查看整页模式。

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

1 个答案: