Flexbox：重新排序和堆积列
问题描述：
我有三列，我想交换特定屏幕大小的顺序。Flexbox：重新排序和堆积列
当前顺序是两个宽度为1/4的列，其间宽度为1/2。
我想将两个1/4宽度的列变成1/2宽度，并在开始处堆叠它们。
我可以使用浮动复制它，但无法找出使用flexbox的方法。
我努力得到两个1/4宽度的列堆叠，同时是父宽度的50％。
这是fiddle。
.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>
答
的关键，这个布局切换柔性容器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>
这是很容易实现，如果你有对父固定高度，但我不喜欢这种解决方案我自己。不知道这是否可以通过'flex-direction：row;'来实现 –
我的每个'col1of2'和'col1of4'都有一个固定的高度，而'col1of2'基本上是两倍的大小。我尝试使用flex方向'列'，但无法找到一种方式让它以相反的方式与较大的盒子一起工作。 –
我的意思是你可以用它实现它：https://jsfiddle.net/bL0m856o/但是这对内容来说是非常严格的，如果你希望它是动态的，它就不会工作得很好 –