【问题标题】：Ordering classes in bootstrap 3在引导程序 3 中排序类
【发布时间】：2018-07-04 03:35:48
【问题描述】：

我有一个简单的容器，其中一行包含 6 个元素（div）。我正在努力使用媒体查询重新排序元素。

这是我目前所拥有的：

    @media (min-width: 320px) and (max-width: 480px) {
        .product2{
          order: 3;
        }
        .products{
            display: flex;
            flex-direction: column;
        }
    }

<div class="row products">
        <div class="col-sm-6 col-md-4 product1">product1</div>
        <div class="col-sm-6 col-md-4 product2">product2</div>
        <div class="col-sm-6 col-md-4 product3">product3</div>
        <div class="col-sm-6 col-md-4 product4">product4</div>
        <div class="col-sm-6 col-md-4 product5">product5</div>
        <div class="col-sm-6 col-md-4 product6">product6</div>
    </div>

我希望当放置在一行中时，第二个产品在第三个产品的下方。

当我运行我的应用程序时，会显示重新排序的元素，但 product2 不是放置在第三个产品的位置，而是作为 product6 放置在最后一个元素中。

我的代码有什么问题？有什么想法吗？

【问题讨论】：

标签： html css media-queries

【解决方案1】：

您应该使用 ID。在 CSS 中有一种叫做特异性的东西，它基本上意味着，哪个规则最重要（并被应用）。

将您的 HTML 更改为：

 <div class="row products">
    <div class="col-sm-6 col-md-4" id="product1">product1</div>

    <!-- rest of divs -->
</div>

和css到：

div#product1 {
    /** your rules **/
}

这将覆盖类样式。

这里是 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

重读问题后更新

您想使用push 和pull 类：

这样你的 HTML 就变成了

 <div class="row products">
    <div class="col-sm-6 col-md-4 col-sm-push-12" id="product1">product1</div>
    <div class="col-sm-6 col-md-4 col-sm-pull-12" id="product2">product2</div>

    <!-- rest of divs -->
</div>

这会将product1 推到product2 下方sm 视口上，阅读所有相关信息：https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

【讨论】：

stil 不起作用，显示为最后一个元素，
@Kaczkapojebana 您是否删除了您的媒体查询/将col-sm 更改为col-xs？
实际上你的回答并没有说明什么，这是小提琴你可以检查一下吗，我尝试过类似但仍然无法工作jsfiddle.net/Mwanitete/7pdLexjk/4
@Kaczkapojebana 是的 - 我的代码是模板答案，而不是复制/粘贴解决方案 - 它旨在教育不要被复制
好的，我检查了您提供的链接并尝试按照说明进行操作，您可以在我的小提琴中看到它，也许我遗漏了一些东西

【解决方案2】：

如果有人感兴趣，我找到了解决方案。如我所愿完美工作。感谢大家的支持 html

<div class="row products">
        <div class="col-sm-6 col-md-4 product" id="product1">product1</div>
        <div class="col-sm-6 col-md-4 product" id="product2">product2</div>
        <div class="col-sm-6 col-md-4 product" id="product3">product3</div>
        <div class="col-sm-6 col-md-4 product" id="product4">product4</div>
        <div class="col-sm-6 col-md-4 product" id="product5">product5</div>
        <div class="col-sm-6 col-md-4 product" id="product6">product6</div>
    </div>

css

   @media (min-width: 320px) and (max-width: 480px) {
        .products{
            display: flex;
            flex-direction: column;
        }
.product:nth-of-type(1) { order: 1; }
.product:nth-of-type(2) { order: 3; }
.product:nth-of-type(3) { order: 2; }
.product:nth-of-type(4) { order: 4; }
.product:nth-of-type(5) { order: 5; }
.product:nth-of-type(6) { order: 6; }

}

【讨论】：