推拉柱.引导带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-*类。

使用. order -类来控制内容的可视顺序。这些类是响应的，因此您可以按断点设置顺序(例如. order -1 order-md-2)。包括对所有五个网格层的1到12的支持。

更多细节和示例可以是在这里发现的

这意味着您的示例(和答案)：

    <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，因为order类不绑定到网格系统，而是允许完全控制多达12列的位置。

这意味着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>

Answer 2

以上的答案是有帮助的，但我正在回答我自己的问题，没有更多的细节，所以它可能会对未来的任何人有所帮助。:)

问题：，实际上，我的技巧是对的，但假设是错误的。我在想，col-sm-*将应用于移动设备。但是这个类是针对> 576px屏幕设备的。

下面是网格分类：(V4 Alpha 6)

• 特小：<576 .col-
• Small:≥576px .col-sm-
• 介质：≥768≥.col-md-
• Large:≥992px .col-lg-
• 特大型：≥1200≥.col-xl-

有关更多细节，请参阅Bootstrap 4 Alpha

技术：

1. 首先为移动屏幕编写HTML (例如A、B)
2. 对大屏幕设备使用推拉(例如B)

下面是针对我的问题的代码：

​

<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

这里接受的答案错误地描述了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>

根据迁移文档 for BootStrap 4，也请参阅属性。