如何通过CSS在移动端重新排序嵌套结构的Div元素

桌面端布局保留原有逻辑 #

桌面端维持classAB的左右分布样式，代码不变：

.classAB {
  display: flex; 
  justify-content: space-between;
  text-align: center;
}

移动端用Grid打破嵌套限制实现排序 #

由于嵌套结构导致flex的order无法跨容器生效，改用Grid布局配合display: contents来实现预期排序：

修改后的完整CSS：

/* 桌面端样式 */
.classAB {
  display: flex; 
  justify-content: space-between;
  text-align: center;
}

/* 移动端适配 */
@media screen and (max-width: 531px) {
  .container {
    display: grid;
    text-align: center;
  }
  
  .classAB {
    display: contents; /* 让classAB的子元素直接成为container的Grid子元素，打破嵌套 */
  }
  
  .classA {
    order: 1;
    display: flex;
    flex-direction: column;
  }
  
  .classC {
    order: 2;
    margin: 1rem 0; /* 可选：增加模块间距提升可读性 */
  }
  
  .classB {
    order: 3;
    display: flex;
    flex-direction: column;
  }
}

核心原理 #

• display: contents会让classAB容器本身不再参与布局，它的子元素（classA、classB）会直接成为父容器container的Grid子元素，这样就能和classC一同通过order属性调整排列顺序。
• 无需修改原有HTML结构，仅通过CSS即可实现跨嵌套的元素排序。

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