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

我并不是要求在引导程序中对列进行简单的中心对齐。这很简单，而且has been covered already，这些解决方案不适用于我在这里要做的事情。
我想要的是一个在宽设备上有五列的布局，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中它下面的两列之间浮动？我试过在D和E列中添加不同的pull-类和floatCSS，但找不到任何有用的东西。

最佳答案

我想这是你想要的：

<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。
它可以很容易地更改响应列的顺序。
希望有帮助。
解释：
（原始订单）

（新订单）

推-*（右移*步）
拉-*（向左移动*步）
B=>从（3）到（6）=>按3步
C=>从（5）到（11）=>按6步
D=>从（7）到（3）=>拉动4步
E=>从（10）到（8）=>拉动2步

关于html - Bootstrap中的“拉中心”:A -D- B -E- C列折叠到A-B-C//D-E，如何在D和E之间获得B？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36676140/