Question

无论我做什么，我都无法通过100％宽度/小scrns来推倒和叠加。我尝试了col-xs-pull / push-12或col-xs-pull / push-0。我也尝试搞乱div浮动，但无济于事。

我错过了一些明显的东西，还是我需要开始这个难题的第二阶段？

<div class="row>
<div id="main" class= "col-xs-12 col-xs-pull-? col-sm-8"></div>
<div id="r-column" class="col-xs-12 col-xs-push-? col-sm-4"></div>
</div>

Answer 1

如果您首先使用＆＃34;移动设备＆＃34;方法，你将r柱放在你的标记中，然后相应地使用推/拉

<div class="row">
 <div id="r-column" class="col-xs-12 col-sm-push-8 col-sm-4">right</div>
 <div id="main" class="col-xs-12 col-sm-pull-4 col-sm-8">main</div>
</div>

http://www.bootply.com/121630

Answer 2

我在移动设备中使用它 - 交换col

/* SET order of DIV */
@media only screen and (max-width:991px) {
    .order {
        display:-webkit-flex;
        display:flex;       
        flex-direction:column;
        -webkit-flex-direction:column;
    }
    .order .ord1 {
        order:1;-webkit-order:1;

    }
    .order .ord2 {
        order:2;-webkit-order:2;
    }
    .order .ord3 {
        order:3;-webkit-order:3;
   }
    .order .ord4 {
        order:4;-webkit-order:5;
    }
}

。

 <div class="container-fluid">
    <div class="row order">
        <div class="ord2 col-xs-12 col-md-3">Last</div>
        <div class="ord1 col-xs-12 col-md-3">First</div>
    </div>
</div>

在小scrn-Bootstrap推拉级或浮动修复时交换2列堆叠顺序？

2 个答案: