html - Bootstrap 3 拉和推不按预期运行

Question

我有一个关于 Bootstrap 3 的问题拉和推列排序。我做了一个简单的图像来解释我的问题。左侧是我的网格的 lg 和 md 版本。在右侧，它在 sm 中应该是什么样子。

在发现(感谢@Danko)Bootstrap 具有push 和pull 选项后，我做了以下操作:

<div class="col-lg-6 col-md-6 col-sm-8"></div>
<div class="col-lg-6 col-md-6 col-sm-8 col-sm-push-8"></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-sm-pull-8"></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-sm-pull-8"></div>

但我无法让它工作。首先，所有列在除 sm 之外的所有其他断点上都发生了奇怪的移动，而且在 sm 上，其中一个绿色框消失了。

我是不是搞错了拉和推的逻辑？真的需要一些帮助!

Answer 1

在这种情况下，除非您创建自定义媒体查询，否则无法通过推/拉获得您想要的内容。更好的方法可能是使用 Bootstrap 实用程序类来创建 2 个单独版本的标记。 1 个用于 md/lg 1 个用于 xs/sm

<div class="row hidden-md hidden-lg">
   <div class="col-xs-8 col-md-6"> </div>
   <div class="col-xs-4 col-md-6"> </div>
   <div class="col-xs-4 col-md-6"> </div>
   <div class="col-xs-8 col-md-6"> </div>
</div>
<div class="row hidden-xs hidden-sm">
   <div class="col-md-6"> </div>
   <div class="col-md-6"> </div>    
   <div class="col-md-3"> </div>
   <div class="col-md-3"> </div>
</div>

http://www.bootply.com/876ukbaHyW