Question

我正在尝试在压缩到手机时重新排序我的列。

例如，在下面的示例中，列A位于左侧，列B位于右侧，适用于除移动设备（xs）之外的所有屏幕。

当xs移动断点被击中时，A位于顶部，B位于底部。期望的行为是B应该在顶部，A应该在底部。我的示例很简单，但我还需要使用超过2列。

＆＃13;

.a{
  background-color: darkred;
  color: #fff;
}
.b{
  background: darkgrey;
}
.a,.b{
  font-size: 40px;
}

＆＃13;

<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的所有组合，我可以想到但它似乎并没有像文档描述的那样工作。

如何更改移动设备上行的顺序？

Answer 1

尝试：

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

我改变了你的小提琴，它似乎工作得很好。

Bootstrap 3中的重新排序列无法按预期工作

1 个答案: