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

我在Bootstrap3中做了一些列排序的实验，遇到了这个问题

如何实现以下顺序：

• XS:123
• SM:231
• MD:312
• LG:123

这就是我所拥有的：

LG

不工作，显示

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>

1.
2.
3.

在我看来，当您在同一个div中使用多个push/pull类时，默认的BS-css中似乎存在冲突，或者至少会得到意外的结果

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

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

}    

---

希望这有帮助

注意您为每列设置的

push

和

pull

类，在

lg

大小处，您需要重置设置为较小大小的类。因此，对于第一列，您需要重置

push

not pull，对于第二列，您需要重置这两个：

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

---

谢谢，这很有道理。既然如此，为什么我不需要在

md

中重置

pull

类？谢谢你的解释：）

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