我有一个简单的容器,其中一行包含 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 放置在最后一个元素中。
我的代码有什么问题?有什么想法吗?
最佳答案
您应该使用 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
关于html - 在 bootstrap 3 中排序类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51156230/