Bootstrap 3 pull and push不按预期行事

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个单独版本。 md / lg为1，xs / sm为1

<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

Answer 2

这个问题可能已经过时但是我找到了一个使用可见和隐藏的解决方案，而不是使用推拉，因为除非Skelly和我提到的自定义媒体查询也使用了Skelly的一些代码，否则无法完成。

<div class="row">
    <div class="col-sm-9 col-md-6 O"></div>
    <div class="col-md-6 visible-md visible-lg B"></div>
    <div class="col-sm-3 G"></div>
    <div class="col-sm-3 G"></div>
    <div class="col-sm-9 hidden-md hidden-lg B"></div>
</div>

使用了Skelly的bootply bootply.com/y9N6cXjYSQ并将此代码替换为现有代码。