Question

我正在尝试使用Bootstrap在更大的屏幕上执行以下操作

+--+--+--+--+--+--+--+--+--+--+--+--+
|  div1  |       div2      |  div3  |
+--+--+--+--+--+--+--+--+--+--+--+--+

但是当下降到较小的屏幕时，我需要以下内容：

+--+--+--+--+--+--+--+--+--+--+--+--+
|      div1       |      div3       |
+--+--+--+--+--+--+--+--+--+--+--+--+
|                div2               |
+--+--+--+--+--+--+--+--+--+--+--+--+

显然第一部分很简单：

<div class="row">
    <div class="col-md-3">div1</div>
    <div class="col-md-6">div2</div>
    <div class="col-md-3">div3</div>
</div>

但是为第二部分添加功能是我被困住的地方。

我已经尝试了以下内容，但它只是一团糟，列的顺序相同：

<div class="row">
    <div class="col-md-3 col-sm-6">div1</div>
    <div class="col-md-6 col-sm-push-12">div2</div>
    <div class="col-md-3 col-sm-pull-6">div3</div>
</div>

如何实现所需的功能？

Answer 1

如果您能够重新订购div，可以使用以下html和类：

<div class="row">
    <div class="col-md-3 col-sm-6">div1</div>
    <div class="col-md-3 col-sm-6 pull-right">div3</div>
    <div class="col-md-6 col-sm-12">div2</div>
</div>

Example

Answer 2

我认为你需要首先考虑移动＆＃34; ..

  <div class="row">
    <div class="col-xs-6 col-md-3"> div1 </div>
    <div class="col-xs-6 col-md-3 col-md-push-6"> div3 </div>
    <div class="col-xs-12 col-md-6 col-md-pull-3"> div2 </div>  
  </div>

演示： http://bootply.com/zPPaDT4ZIG

Answer 3

使用Jquery：

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="row">
    <div id="div1" class="col-md-3 col-sm-6">div1</div>
    <div id="div2" class="col-md-6 col-sm-push-12">div2</div>
    <div id ="div3" class="col-md-3 col-sm-pull-6">div3</div>
</div>

<script type="text/javascript">

$(window).resize(function(){

       if ($(window).width() <= 480) {  

              $( "#div2" ).appendTo('#div3');

       } else
       {
              $( "#div2" ).appendTo('#div1');
       }  

});



</script>
</body>

Answer 4

此解决方案需要在小屏幕尺寸上添加clearfix：

<div class="row">
    <div class="col-sm-6 col-md-3">
        div1
    </div>
    <div class="col-sm-6 col-md-3 col-md-push-6">
        div3
    </div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-12 col-md-6 col-md-pull-3">
        div2
    </div>
</div>

Answer 5

另一种方法，它更简单，但只使用Bootstrap：

<div class="row">
    <div class="col-sm-6 col-md-3">div1</div>
    <div class="visible-md visible-lg col-md-6">div2</div>
    <div class="col-md-3">div3</div>
</div>
<div class="row visible-xs visible-sm">
    <div class=" col-sm-12">div2</div>
</div>

根据行的屏幕大小重新排序div

5 个答案: