Question

我正在使用Bootstrap 3中的列排序进行一些实验并遇到了这个问题。

如何达到以下顺序：

XS：123
SM：231
MD：312
LG：123

这就是我所拥有的：LG无效并显示<blank>13而不是123

<div class="row">
   <div class="col-xs-4 col-sm-push-8 col-md-push-4 col-lg-pull-0">1</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-push-4 col-lg-pull-0">2</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-pull-8 col-lg-pull-0">3</div>
</div>

Answer 1

注意您为每列设置的push和pull类，需要lg大小，以重置那些以较小尺寸设置的大小。因此，对于第一列，您需要重置push而不是拉动，而对于第二列，您需要重置两者：

<div class="row">
   <div class="col-xs-4 col-sm-push-8 col-md-push-4 col-lg-push-0">1</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-push-4 col-lg-pull-0 col-lg-push-0">2</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-pull-8 col-lg-pull-0">3</div>
</div>

<强> Demo fiddle

<强>更新

回答你的问题，为什么在这种情况下不需要重置中等大小的中间栏上的拉力：

Bootstrap使用left和right CSS属性分别推送和拉取列，当您处于中等大小的断点时，两个属性都被设置（因为较小大小的值会传播到更大的），当发生这种情况时，它在CSS specification中被定义为left属性（推送）具有优先权，并且right属性被有效地忽略。

这意味着如果您要按相反的顺序排序，首先按下然后拉动您需要使用col-md-push-0重置左侧属性：

<div class="col-sm-pull-4 col-md-push-4">No Reset (Push has precedence)</div>
<div class="col-sm-push-4 col-md-pull-4 col-md-push-0">Reset is needed</div>

Answer 2

在我看来，当你在同一个div中使用多个推/拉类时，默认的BS css中存在冲突，或者至少你会得到意想不到的结果。

当我添加以下CSS时，我的HTML工作正常：

@media (min-width: 1200px){
.col-sm-push-8, .col-md-push-4{
left:0;
}

}

jsFiddle 希望这有帮助！

Bootstrap3中的列排序未按预期工作

2 个答案: