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-*类已replaced by 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

上面的答案很有帮助，但我正在回答我自己的问题，更详细一些，以便将来可以帮助任何人。：）

问题：实际上，我的技术是正确的，但错误的假设。我在想，col-sm-*将适用于移动设备。但此课程适用于> 576px屏幕设备。

以下是网格分类 :( V4 Alpha 6）

超小：＆lt; 576px .col-
小：≥576px.col-sm-
中：≥768px.col-md-
大：≥992px.col-lg-
超大：≥1200px.col-xl-

Reference Bootstrap 4 Alpha for more detail

<强>技术：

首先为移动屏幕编写HTML（例如A B）
对大屏幕设备使用推拉（例如B A）

以下代码适用于我的问题：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container-fluid">

  <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>

Answer 3

您可以使用解决方案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>

我想这就是你要找的...... 改变了拉动＆amp;推送小屏幕（ sm ）而不是中画面（ md ）

拉适用于左侧值（指定的col值）

推送从右侧（指定了col值）

Answer 4

Bootstrap＆＃34;小＆＃34; （sm）大小涵盖768到992像素的范围。＆＃34;介质＆＃34; （md）的像素为992到1200像素。（Reference for Bootstrap 4 alpha）。

通过使用class="col-md-7 col-sm-7 push-md-5"，您可以定义当屏幕宽度超过992像素时发生推送。宽度在768和992像素之间的屏幕只使用col-sm-7设置，只有更小的屏幕使用默认值，使用全宽。

因此，对于非常小的屏幕（<576像素），您应该在A之上看到B。对于小屏幕（使用sm设置），您将看到A B，因为它们未被推/拉。只有大屏幕（＆gt; 992像素，使用md类），您才能看到B A。

要修复它，只需删除md - 类，并用其他人提出的sm变体替换pull / push-classes。

Answer 5

bootstrap 4中不包含col-md-push-5和col-md-pull-7类，但Bootstrap扩展可以。 http://bootstrap-extension.com/#gridsystem

解决方案：

<div class="row">

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

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

Answer 6

这里被接受的答案错误地表示了order类的作用，这仅仅是控制flex容器内的可变项的顺序（通过CSS order属性）。它们不能完全替代push-*和pull-*类的所有用法，但可以很好地用于重新排序列。

要完成您正在寻找的BS4类，您需要做：

<div class="col-sm-7 col-md-7 order-md-2">
    A, shows first on mobile, second on desktop
</div>
<div class="col-sm-5 col-md-5 order-md-1">
    B, shows second on mobile, first on desktop
</div>

根据BootStrap 4的migration docs。另请参见CSS order property。

推动和拉动列 - Bootstrap 4

6 个答案: