推动和拉动柱 - 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>

它在移动设备上的顺序正确,但在桌面上没有.我尝试了几个指南和帮助材料,但没有运气.在大多数指南中,它们移动的是相同的列,如4或6,所以清楚地理解它有点令人困惑.

Answer 1

在最新Bootstrap v4.x值得注意的是,push-*和pull-*类已取代了order-*阶级.

这意味着你的例子(和答案):

    <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>

Answer 2

这里有一个解决方案https://jsfiddle.net/kzmz7qaL/1/

.div1{ 
  background: blue;
  color: #fff;
}

.div2 {
  background: red;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

  <div class="row">

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

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

  </div>

</div>

我想这就是您正在寻找的...更改了小屏幕（sm）而不是中屏幕（md）的拉动和推动

拉动作用于左侧值（指定的列值）

从右侧推送有效（指定 col 值）