CSS flex：将 row-reverse 与响应式媒体查询结合使用

Question

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

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