我有一个带有2列的flexbox，能否在特定尺寸下使第二列进入第一列的下面？

Question

如您在代码段中所见，我有2列，但是我想使其在浏览器变少时使红色列位于蓝色列下方（并且它们都占据父宽度的100％）大于1200像素。

现在，如果我使用2个内联块元素，我将创建一个媒体查询以使两个元素都阻塞，但是，既然我正在尝试使用flexbox，我不确定如何做到这一点。 / p>

.specific-image-container {
    display: flex;
    position: relative;
    width: 100%;
}
.specific-image-column {
    flex: 4;
    background-color: blue;
}
.more-images-column {
    flex: 1;
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

    <div class="specific-image-column">
        <div class='content'>s</div>
    </div>
    
    <div class="more-images-column">
        <div class='content'>s</div>
    </div>
    
</div>

Answer 1

在媒体查询中将flex-direction设置为column

@media all and (max-width: 1200px) {
    .specific-image-container {
        flex-direction: column;
    }
}