我有三列，我想在特定的屏幕尺寸下交换它们的顺序。
当前的顺序是两个 1/4 宽度的列，中间有 1/2 宽度。
我想将两个1/4宽度的列变成1/2宽度，并在开始时将它们堆叠起来。
我可以使用浮动来复制它，但无法找到使用弹性盒的方法。
我正在努力让两个 1/4 宽度的列堆叠在一起，同时为父宽度的 50%。
这里有一个fiddle https://jsfiddle.net/7ef21y4h/2/.
.col1of2 {
width: 50%;
background: red;
}
.col1of4 {
width: 25%;
background: yellow;
}
.col1of4--last {
background: blue;
}
.col-container {
display: flex;
}
@media all and (max-width: 1000px) {
.col1of2 {
order: 3;
}
.col1of4 {
order: 1;
}
}
/* css for working example */
.ex1of2 {
width: 50%;
background: red;
float: right;
}
.ex1of4 {
display: inline-block;
width: 50%;
background: yellow;
}
.ex1of4--last {
background: blue;
}
<H4>what i have</H4>
<div class="col-container">
<div class="col col1of4">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="col col1of2">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="col col1of4 col1of4--last">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
</div>
<!-- what i want it to look like when it swaps -->
<H4>what i want to achieve</H4>
<div class="ex-container">
<div class="ex ex1of4">
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="ex ex1of2">
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="ex ex1of4 ex1of4--last">
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
</div>
此布局的关键是将 Flex 容器切换为column wrap在媒体查询中。
您还必须定义容器的高度，以便项目知道在哪里包装。
.col-container {
display: flex;
}
.col1of2 {
width: 50%;
background: red;
}
.col1of4 {
width: 25%;
background: yellow;
}
.col1of4--last {
background: blue;
}
@media all and (max-width: 1000px) {
.col-container {
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
.col1of2 {
order: 1;
}
.col1of4 {
width: 50%;
}
}
<div class="col-container">
<div class="col col1of4">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="col col1of2">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
<div class="col col1of4 col1of4--last">
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
<div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
</div>
</div>
修改后的小提琴 https://jsfiddle.net/tLhoge8v/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
