twitter-bootstrap - 推拉列 - Bootstrap 4

Question

这就是我需要的:

桌面: B A
手机:

A
B

这是我的 HTML:

<div class="row">

    <div class="col-md-7 col-sm-7 push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

它在移动设备上的顺序正确，但在桌面上不正确。我尝试了一些指南和帮助 Material ，但没有运气。在大多数指南中，他们正在移动相同的列，例如 4 或 6，因此清楚地理解它有点令人困惑。

Answer 1

自 Bootstrap v4.x 值得注意的是push-*和 pull-*类(class)已replaced by order-*类(class)。

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

更多细节和例子可以是 found here
这意味着您的示例(和答案):

    <div class="row">
        <div class="col-md-7 push-md-5">
            A
        </div>
    
        <div class="col-md-5 pull-md-7">
            B
        </div>
    </div>

变成:

    <div class="row">
        <div class="col-md-7 order-md-5">
            A
        </div>
    
        <div class="col-md-5 order-md-7">
            B
        </div>
    </div>

通过问题中给出的示例，它会起作用。
然而 ，正如下面评论中提到的，你不需要使用 order-md-5和 order-md-7因为除了允许完全控制多达 12 列的位置之外，订单类不绑定(bind)到网格系统。
这意味着 order-md-1和 order-md-2是一个更合适的解决方案。
还有这样的助手:

    <div class="container">
      <div class="row">
        <div class="col order-last">
          First, but last
        </div>
        <div class="col">
          Second, but unordered
        </div>
        <div class="col order-first">
          Third, but first
        </div>
      </div>
    </div>