Html 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

上的一个绿色框也会消失

---

我的推拉逻辑有问题吗？真的需要帮助

在这种情况下，除非创建自定义媒体查询，否则无法通过推/拉获得所需内容。更好的方法可能是使用引导实用程序类创建两个不同版本的标记。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>

---

在这种情况下，除非创建自定义媒体查询，否则无法通过推/拉获取所需内容。更好的方法可能是使用引导实用程序类创建两个不同版本的标记。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>

---

这个问题可能很老了，但我找到了一个解决方案，使用visible and hidden而不是push and pull，因为除非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并用现有代码替换此代码。

此问题可能很老，但我找到了一个解决方案，使用visible and hidden而不是push and pull，因为除非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的引导层并用现有代码替换此代码。

推送和拉送类是遗传的，因此col-sm-push-8也会影响md和lg中div的类。如果希望这些类仅在sm中应用，则需要添加

col-md-push-0

或

col-md-pull-0

。这并不能解决您的问题，但解释了为什么它看起来凌乱的其他尺寸比sm@尼科弗娜：谢谢你让我说得更清楚！

push

和

pull

类是遗传的，因此col-sm-push-8也会影响div在

md

和

lg

中的类。如果希望这些类仅在sm中应用，则需要添加

col-md-push-0

或

col-md-pull-0

。这并不能解决您的问题，但解释了为什么它看起来凌乱的其他尺寸比sm@尼科弗娜：谢谢你让我说得更清楚！谢谢你的回答，这是一个很好的方法，但我想从我这里提到这个问题，我不知道专栏排序的存在：里面有一个很好用的地方，或者我监督什么？你能想出不隐藏专栏/div的解决方案吗？正如我说的，该解决方案需要自定义媒体查询。@超大-另一个示例不同。示例中的蓝色单元格下移到最下面一行。如果您不介意将蓝色单元格向下移动，并将绿色单元格保持在上方，则这样比较容易@谢谢你的回答。我绝对想要上图中的蓝色盒子。自定义媒体查询解决方案是什么样子的？谢谢您的回答，这是一个很好的方法，但我想提一下我的问题，我不知道专栏排序存在：内部有一个，或者我需要监督一些事情吗？你能想出一个不隐藏列/div的解决方案吗？正如我所说的，这个解决方案需要自定义媒体查询。@supersize-另一个例子不同。示例中的蓝色单元格下移到最下面一行。如果您不介意将蓝色单元格向下移动，并将绿色单元格保持在上方，则这样比较容易@谢谢你的回答。我绝对想要上图中的蓝色盒子。自定义媒体查询解决方案是什么样子的？