我正在尝试在压缩到手机时重新排序我的列。
例如,在下面的示例中,列A位于左侧,列B位于右侧,适用于除移动设备(xs)之外的所有屏幕。
当xs移动断点被击中时,A位于顶部,B位于底部。期望的行为是B应该在顶部,A应该在底部。我的示例很简单,但我还需要使用超过2列。
.a{
background-color: darkred;
color: #fff;
}
.b{
background: darkgrey;
}
.a,.b{
font-size: 40px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 a">A</div>
<div class="col-xs-12 col-sm-4 b">B</div>
</div>
</div>
&#13;
JSfiddle mirror:https://jsfiddle.net/hfd9jm5e/
我已经尝试过col-xs-push / pull的所有组合,我可以想到但它似乎并没有像文档描述的那样工作。
如何更改移动设备上行的顺序?
答案 0 :(得分:2)
尝试:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-6 b">B</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-4 a">A</div>
</div>
</div>
我改变了你的小提琴,它似乎工作得很好。