Bootstrap 3：push/pull - bug 还是移动优先？答案

【问题标题】：Bootstrap 3: push/pull - bug or mobile first?Bootstrap 3：push/pull - bug 还是移动优先？
【发布时间】：2017-10-14 00:23:46
【问题描述】：

我想更改我的col-* 的顺序，但我不确定我这样做是否正确。

我刚刚切换了两个字符的顺序 (C & D) 来修复它，但感觉不对。是因为“移动优先”还是我错过了什么？

目标：

-------------------------
|    SIZE   |   ORDER   |
-------------------------
|   >= SM   |  A B C D  |
|    < SM   |  A B D C  | <- C & D are switching 
-------------------------

我的第一个方法和理解（不起作用）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6">A</div>
    <div class="col-sm-6">B</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">C</div> <!-- !!! -->
    <div class="col-sm-6 col-sm-pull-6">D</div>
  </div>
</div>

第二种方法（有效，但不确定是否正确）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6">A</div>
    <div class="col-sm-6">B</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">D</div> <!-- !!! -->
    <div class="col-sm-6 col-sm-pull-6">C</div>
  </div>
</div>

提前致谢！

【问题讨论】：

您需要先标记为移动，然后将推拉应用到其他尺寸。 Bootstrap 是移动优先的。

标签： html css twitter-bootstrap grid

【解决方案1】：

您的第二种方法是正确的，当您使用push class and pull class 时，文本将彼此移动。您正在使用sm-push 和sm-pull，所以它只会在小型设备中起作用。如果你想移动查看你可以使用xs-pull and xs-push。

【讨论】：