在使用媒体查询时,我在 flex 格网布局中使用 row-reverse
时遇到了问题。通常情况下,列顺序会被反转,但当媒体查询将列宽更改为100%时,列顺序不再反转。
我该如何更新我的 CSS,在小屏幕上保持列顺序的反转?
.row {
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
[class*='col-'] {
flex: 1;
}
.row-reverse {
flex-direction: row-reverse;
}
.col, [class*='col-'] {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
@media (min-width: 600px) {
.col-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
}
<h3>Resize browser to less than 600px to see the ordering issue</h3>
<div class="row row-reverse">
<div class="col-3 padding0-5">
<p>First</p>
</div> <!-- /.col-3 -->
<div class="col-3 padding0-5">
<p>Second</p>
</div> <!-- /.col-3 -->
<div class="col-3 padding0-5">
<p>Third</p>
</div> <!-- /.col-3 -->
<div class="col-3 padding0-5">
<p>Fourth</p>
</div> <!-- /.col-3 -->
</div> <!-- /.row -->