在移动设备上折叠 flexbox 列

Question

我有两列（使用 flexbox）和一个媒体查询断点。但是，我已尝试使用以下 css 属性使列在移动设备上为 100% 并堆叠在一起。

目前保持为一列，始终并排。

宽度：100%；
弹性增长：1；

容器代码

.flexbox-container {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

列的代码

.flexbox-column {
  display: flex;
    width: 100%;
    padding: 50px;
  background-color: yellow;
}

@media (min-width: 768px) {
  .flexbox-column {
    width: 50%;
    background-color: #444;
  }
}

我的代码笔（我不知道如何在此处使用“运行代码”功能） https://codepen.io/jordanc26/pen/yjWZQJ

Answer 1

移动这条规则

  .flexbox-container {
     display: flex;
  }

进入 mediaquery 范围就足够了：
事实上，对于狭窄的视口，您的两个列元素不再位于容器中flexbox，因此它们将堆叠在彼此的顶部，并且它们将扩展到整个可用宽度

代码笔演示