改变2列Flexbox响应网格的行为

Question

使用几行代码很容易实现标准的2列网格：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 420px;
}
.element {
  margin: 10px auto;
  background-color: #1990C8;
  max-width: 200px;
  width: 100%;
  height: 80px;
}

＆＃13;

<div class="container">
  <div class="element">Element 1</div>
  <div class="element">Element 2</div>
  <div class="element">Element 3</div>
  <div class="element">Element 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

在调整视口大小时，元素会相互缠绕，落在单个列下。那完全很好。

如果您希望元素缩小到@media screen (min-width: value)，只有然后允许它们再次换行，让用户使用单列布局，该怎么办？ 你如何使用纯粹的flexbox和媒体查询来实现这一结果？ ：）