ご協力いただきありがとうございます。コンテナDIV（最大幅：800ピクセル）内の行の応答性のあるdivsスタックオーダー
4のdiv、
DIV1 - フロート左、一定の幅（250ピクセル）
DIV2 - 左フロート、一定の幅（200pxの）
DIV3 - なしフロート（MIN-幅：200pxの） -
DIV4 witdh行の残りの部分を取って - 、ウィンドウのサイズが変更として、私が応答するように設計を必要と右、固定幅（は50px）
フロート
divは、
の画像 'divs stack order'の下に示されている順序で縦に積み重ねる必要があります。
div3は固定幅ではありませんのでご注意ください。
"順序" プロパティがのみで動作します "表示：フレックス" プロパティを
#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>
SO無料コーディングサービスではありません。 [良い質問をするにはどうすればいいですか]（https://stackoverflow.com/help/how-to-ask）を見てください。 –