Bootstrap 3 拉和推的行为不符合预期答案

【问题标题】：Bootstrap 3 pull and push not behaving as intendBootstrap 3 拉和推的行为不符合预期
【发布时间】：2016-04-01 18:28:03
【问题描述】：

我有一个关于 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 上，其中一个绿色框消失了。

我在拉和推的逻辑上有什么问题吗？真的需要帮助！

【问题讨论】：

push 和 pull 类是遗传的，所以 col-sm-push-8 也会影响md 和 lg 中的 div 类。如果希望类只适用于sm，则需要添加col-md-push-0 或col-md-pull-0。不能解决你的问题，但解释了为什么它在其他尺寸上看起来凌乱！
@NicoFerna 谢谢你让这个更清楚！

标签： html css twitter-bootstrap-3

【解决方案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

【讨论】：

谢谢你的回答，这是一个很好的方法，但我想参考我的这个问题，我不知道存在列排序：stackoverflow.com/questions/26765464/…里面有一个@ 987654323@ 哪里可以正常工作，或者我需要监督什么？
你能想出不隐藏列/div的解决方案吗？
正如我所说，该解决方案需要自定义媒体查询。
@supersize - 另一个例子不同。您示例中的蓝色单元格向下移动到底行。如果您不介意将蓝色单元格向下移动并保持绿色单元格上方，则这样更容易.. bootply.com/y9N6cXjYSQ
@Skelly 感谢您的回答。我绝对想要上图中的蓝色框。自定义媒体查询解决方案是什么样的？

【解决方案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 并将此代码替换为现有代码。

【讨论】：