CSS flex：使用行反向和响应式媒体查询

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

Answer 2

您可以在flex-direction: column-reverse设备尺寸上添加< 600px。你也可以用更少的代码来编写它，你只需更改行/列反转。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;