如何用HTML和CSS实现桌面端并排、移动端上下的响应式布局？

不用依赖W3.CSS，原生Flex布局就能轻松实现这个需求，步骤如下：

• 给主内容的父容器设置基础Flex布局：

  .main-content-wrapper {
    display: flex;
    /* 可选：添加列间距，提升视觉效果 */
    gap: 1.5rem;
  }
  

  这里的.main-content-wrapper对应你项目里包含两列内容的父元素，默认flex-direction: row会让子元素横向排列。

• 添加媒体查询，在小屏幕下切换排列方向：

  /* 可根据实际需求调整断点宽度，768px是常见的平板/手机分界点 */
  @media (max-width: 768px) {
    .main-content-wrapper {
      flex-direction: column;
    }
  }
  

  当屏幕宽度小于设定值时，Flex容器的排列方向会改为垂直，两列就会自动上下堆叠。

• 优化子元素适配：
  给两列子元素设置flex: 1，让它们在横向排列时平分容器空间，垂直排列时自动占满宽度：

  .main-column {
    flex: 1;
  }
  

内容的提问来源于stack exchange，提问作者Estelle Bollei