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>