2

I was doing some experiments with column ordering in Bootstrap 3 and came across this problem.

How can I achieve the following order:

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

This is what I have: LG doesnt work and displays <blank>13 instead of 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>
4

2 回答 2

5

注意您为每列设置的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>

演示小提琴

更新

要回答您关于为什么在这种情况下不需要以中等大小重置中间列的拉力的问题：

Bootstrap 使用left和rightCSS 属性分别推和拉列，当您处于中等大小的断点时，两个属性都已设置（因为较小大小的值会传播到较大的值），发生这种情况时，它会在CSS中定义指定属性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>
于 2013-08-30T05:07:53.097 回答
0

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

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

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

}

jsFiddle 希望这会有所帮助！

于 2013-08-30T01:33:49.653 回答