Bootstrap中的“拉中心”：A -D-B -E-C列折叠到A-B-C // D-E，如何在D和E之间获得B？

Question

我不要求在bootstrap中对列进行简单的中心对齐。这很容易has been covered already，这些解决方案不适用于我在这里尝试做的事情。

我想要的是，在宽设备上布局为5列，2 - 3 - 2 - 3 - 2，  向下折叠以得到三个2列4 - 4 - 4，然后是两个3列6 - 6。

这样的事情：

  <div class="row">
    <div class="col-xs-4 col-md-2 pull-left">
    A
    </div>

    <div class="col-xs-4 col-md-2 pull-center">
    <!-- of course, pull-center doesn't exist, it's here to illustrate intention -->
    B
    </div>

    <div class="col-xs-4 col-md-2 pull-right">
    C
    </div>

    <div class="col-xs-6 col-md-3"> 
    D
    </div>

    <div class="col-xs-6 col-md-3"> 
    E
    </div>
  </div>

如果存在pull-center且float: middle存在，则在广泛的设备上看起来像这样：

 A- _D_ B- _E_ C-

......在狭窄的设备上就像这样：

 -A-- -B-- -C--
 __D___ __E___ 

...但是，因为没有pull-center或float: middle;这样的东西，目前看起来像这样：

 A- B- _D_ _E_ C-

如何让我的B列在HTML下面的两列之间浮动？我尝试将各种pull-类和float CSS添加到D和E列，但找不到任何有用的内容。

Answer 1

我想你想要的是：

<div class="row">
    <div class="col-xs-4 col-md-2">
    A
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-3">
    B
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-6">
    C
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-4">
    D
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-2">
    E
    </div>
</div>

我使用Bootstrap column ordering。

它可以轻松更改响应列的顺序。

希望它有所帮助。

解释：

（原始订单）

（新订单）

push- *（向右移动*步骤）

pull- *（向左移动*步骤）

B =＆gt;从（3）到（6）=＆gt;推3步

C =＆gt;从（5）到（11）=＆gt;推6步

D =＆gt;从（7）到（3）=＆gt;拉4步

E =＆gt;从（10）到（8）=＆gt;拉2步

Answer 2

您可以使用.col-*-push-*和.col-*-pull-* Bootstrap修饰符类来更改元素的位置，而不是使用float。

您最终会得到以下内容：

<div class="row">
    <div class="col-xs-4 col-md-2">
    A
    </div>

    <div class="col-xs-4 col-md-2 col-md-push-3">
    B
    </div>

    <div class="col-xs-4 col-md-2 col-md-push-6">
    C
    </div>

    <div class="col-xs-6 col-md-3 col-md-pull-4"> 
    D
    </div>

    <div class="col-xs-6 col-md-3 col-md-pull-2"> 
    E
    </div>
  </div>

请参阅example。