如何不新增HTML代码实现RWD响应式布局下的模块位置调整需求

场景1：仅需要about放在所有main内容（article+reply）的下方 #

实现最简单，无需调整内部层级，直接修改外层flex方向即可：

/* 断点可根据项目实际适配规则调整，此处以768px为移动端分界为例 */
@media (max-width: 768px) {
  .demo {
    flex-direction: column;
  }
  .demo .about {
    width: 100%;
  }
}

场景2：需要about插在article下方、reply上方（排列顺序为article → about → reply） #

通过display: contents拆解.main的布局层级实现，完全不修改原有HTML结构：

@media (max-width: 768px) {
  .demo {
    flex-direction: column;
  }
  .demo .main {
    /* 消除.main容器的布局层级，让其子元素直接和.about成为同级布局元素 */
    display: contents;
  }
  .demo .article {
    order: 1;
  }
  .demo .about {
    order: 2;
    width: 100%;
  }
  .demo .reply {
    order: 3;
  }
}

补充说明 #

• display: contents兼容性覆盖所有现代移动端浏览器（Chrome 65+、Firefox 37+、Safari 11.1+），可放心用于生产环境。
• 如果需要保留原.main的黄色背景效果，只需把背景色属性从.demo .main移到.demo .article和.demo .reply上即可，视觉效果完全一致。

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