如何使用Flexbox在特定断点处将<aside>元素堆叠到<main>元素下方

你可以使用 Flexbox 的 flex-direction 属性配合媒体查询快速实现该效果，具体逻辑如下：
你的现有HTML结构中<main>本身就写在<aside>前面，在桌面端flex-direction默认值为row，二者横向排列；当到达指定断点时，将容器的flex-direction改为column，元素就会按照DOM默认顺序垂直排列，自动实现<aside>显示在<main>下方的效果。

完整修改代码 #

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
}

main {
  flex: 2;
  background-color: #181818;
  color: white;
  padding: 5px;
  min-height: 50vh;
}

aside {
  flex: 1;
  background-color: #ddd;
  padding: 5px;
}

/* 新增媒体查询，768px为示例断点，可根据需求调整 */
@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }
}

扩展场景说明 #

如果你后续遇到HTML结构中<aside>写在<main>前面、又不想修改HTML结构的情况，可以配合order属性调整排列顺序：

@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }
  main {
    order: 1;
  }
  aside {
    order: 2;
  }
}

order属性默认值为0，数值越小的flex子元素排列越靠前。

内容的提问来源于stack exchange，提问作者Dan Zuzevich