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

您可以在< 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>

​

Answer 2

只需将您的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 -->

​