CSS在缩小网页时，将一行的右侧堆叠到左侧的下方

Question

我需要将容器#3缩小或移动到#2的下方。我不知道怎么做，我可能需要做flex，但我不知道。我需要左边的(#2)保持相同的大小，右边的(#3)是可以移动的。我不知道还有什么可以添加或更改的，我试过无数种组合，但都没有正确完成。

我希望它像这样:在这里输入图像描述当把导航栏设置得更小的时候像这样输入图像描述

* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
@media all and (max-width: 450px) {
div#tablas_carpetas {
flex-direction: column;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}

<div id="general">
<div id="enlaces">1</div>
<div id="tablas_carpetas">
<div id="tablas">2</div>
<div id="carpetas">3</div>
</div>
<div id="anuncios">4</div>
<div id="pie">5</div>
</div>

Answer 1

你可以在上面添加一个显示网格，而不是flex，当你达到你想要的媒体查询如下。如果这是你想要的，请告诉我。

* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;

}
div#tablas {
order: 1;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
@media all and (max-width: 450px) {
div#tablas_carpetas {
display:grid;
}
div#tablas {
width: 40%;
order: 1;
}
div#carpetas {
max-width: 60%;
order: 2;
}
}

<div id="general">
<div id="enlaces">1</div>
<div id="tablas_carpetas">
<div id="tablas">2</div>
<div id="carpetas">3</div>
</div>
<div id="anuncios">4</div>
<div id="pie">5</div>
</div>