html - 在 bootstrap 3 中排序类

Question

我有一个简单的容器，其中一行包含 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 放置在最后一个元素中。

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

Answer 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>

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