为什么 col-sm-push-6 也在 LG 模式下执行？

Question

我的网站上有一个包含六个内容块的页脚。 根据断点，我希望它们采用 1x6、2x3 或 3x2 格式。

如果没有 push 和 pull 类，块栅格在所有断点上都运行良好。 但是你可以想象，如果它从 3x2 转换为 2x3 格式，我想重新排序一些块。

<!-- footer -->
<div class="footer">
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">                
        </div>
        <div class="col-sm-6 col-md-4">
        </div>
        <div class="col-sm-6 col-sm-push-6 col-md-4">
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-sm-pull-6 col-md-4">
        </div>
        <div class="col-sm-6 col-md-4">
        </div>
        <div class="col-sm-6 col-md-4">
        </div>
    </div>
 </div>
 </div>

在 SM 模式下，重新排序工作正常。 但在 LG 模式下，它仍在执行 col-sm-push-6 命令，因为它将第 3 个 div 推出屏幕。

col-sm-push-6 不只是 SM 吗？

Answer 1

您必须使用col-md-push-0 / col-md-pull-0 来“重置”其他网格尺寸的推/拉..

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">  
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0">
            <div class="well"> </div>
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-sm-pull-6 col-md-4  col-md-pull-0">
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> </div>
        </div>
    </div>
 </div>

http://www.bootply.com/126837