CSS Flex布局：如何使用响应式媒体查询中的row-reverse？

Question

在使用媒体查询时，我在 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 -->

- MultiDev

---

如果您在每个设备上反转顺序，难道不应该按正确的顺序输出HTML吗？ - Pete

Answer 1

只需将您的flex-wrap更改为wrap-reverse;即可。

.row {
 display: flex;
 flex: 0 1 auto;
 flex-direction: row;
 flex-wrap: wrap-reverse;
}
[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 solved</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 -->

- ab29007

Answer 2

您可以在设备尺寸< 600px上添加flex-direction: column-reverse。此外，您可以通过更改行/列反转来用更少的代码编写此内容。

.row {
  display: flex;
}
[class*='col-'] {
  flex: 1;
}
.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 600px) {
  .reverse {
    flex-direction: column-reverse;
  }
}

<div class="row reverse">
  <div class="col-3 padding0-5"><p>First</p></div>
  <div class="col-3 padding0-5"><p>Second</p></div>
  <div class="col-3 padding0-5"><p>Third</p></div>
  <div class="col-3 padding0-5"><p>Fourth</p></div>
</div>

- Nenad Vracar