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

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>

演示小提琴

UPDATE

要回答你的问题,为什么在这种情况下,不需要重置中等大小的中间柱拉力:

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>