5
我希望摆脱媒体查询，只使用flexbox解决我的问题，但我不确定这是否可能。随着窗口变小，我希望列缩小，直到达到最小宽度。一旦他们击中了，中间的专栏将跳下来包装。当flex项目包装时，flexbox可以检测到吗？
我认为我的问题归结为这 - 可以flexbox检测它的包装？如果是这样，我可以提示它用严格的CSS来改变包装上的物品顺序吗？
这里是什么，我的“M尝试使用媒体查询来完成一个codepen。
.wrapper {
display: flex;
justify-content: center;
margin: 5px;
flex-wrap: wrap;
}
.red {
background-color: red;
height: 240px;
margin: 5px;
width: 500px;
order: 0;
}
.yellow {
background-color: yellow;
margin: 5px;
height: 240px;
min-width: 240px;
max-width: 400px;
flex: 1;
order: 1;
}
.blue {
background-color: blue;
height: 240px;
margin: 5px;
min-width: 350px;
max-width: 400px;
flex: 1;
order: 2;
}
@media (max-width:1130px) {
.yellow {
order: 4;
}
}<div class="wrapper">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
</div>