响应式 div 堆栈顺序

Question

提前感谢您的帮助。

连续 4 个div，在容器内 DIV ( 最大宽度： 800px (DIV1 - 向左浮动，固定宽度 ( 250px (DIV2 - 向左浮动，固定宽度 ( 200px (DIV3 - 无浮动 (最小宽度：200px( -取行
的其余部分 DIV4 - 向右浮动，固定宽度 ( 50px (

连续 4 个div

我需要设计具有响应性，并且随着窗口大小的调整，
div 必须按照
下面图片"divs 堆栈顺序"中显示的顺序垂直堆叠。
请注意，div3 不是固定宽度。

divs 堆栈顺序

Answer 1

"order" 属性仅适用于 "Display：flex" 属性

#main {
max-width: 800px;
display: flex;
flex-wrap: wrap;
}
#main div {
height: 80px;
margin: 1px;
font-size: 50px;
text-align: center;
padding-top: 20px;
}
#div1 {
background-color: yellow;
width: 250px;
order: 1;
}
#div2 {
background-color: lightblue;
width: 200px;
order: 2;
}
#div3 {
background-color: lightgreen;
min-width: 200px;
order: 3;
}
#div4 {
background-color: pink;
width: 50px;
order: 4;
}
@media screen and (max-width: 730px) {
#div1 {
width: 44%;
}
#div2 {
background-color: lightblue;
width: 40%;
order: 2;
}
#div3 {
width: 100%;
order: 4;
}
#div4 {
width: 15%;
order: 3;
}
}
@media screen and (max-width: 620px) {
#div1 {
width: 70%;
}
#div2 {
width: 100%;
order: 3;
}
#div3 {
width: 100%;
order: 4;
}
#div4 {
width: 29%;
order: 2;
}
}
@media screen and (max-width: 420px) {
#div1 {
width: 100%;
}
#div2 {
width: 100%;
order: 3;
}
#div3 {
width: 100%;
order: 4;
}
#div4 {
width: 100%;
order: 2;
}
}

<div id="main">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>