移动端Flex布局调整：使用flex-direction未达预期效果求解决方案

你的核心问题是嵌套的flex容器限制了元素的独立排序：当前B和C被包在同一个子容器里，用flex-direction: row-reverse只能把「A」和「B+C组合」整体互换位置，没法单独让C移到最左侧。

推荐用下面这个灵活的方案解决：

调整结构 + 用order控制顺序 #

把三个元素放在同一层级的flex容器中，通过order属性精准控制不同屏幕下的排列顺序：

修正后的HTML #

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

对应CSS #

.container {
  display: flex;
  align-items: center;
  gap: 12px; /* 可选：给元素间加统一间距 */
}

/* 桌面端布局：A左，B+C右 */
.A {
  margin-right: auto; /* 把B和C挤到右侧 */
}

/* 移动端布局：C左，A+B右 */
@media screen and (max-width: 600px) {
  .C {
    order: -1; /* 让C排在所有元素最前面 */
    margin-right: auto; /* 把A和B挤到右侧 */
  }
  .A {
    margin-right: 0; /* 取消桌面端的自动margin */
  }
}

如果必须保留原有的嵌套结构，那只能把C从内层容器中抽出来，否则无法单独调整它的位置——嵌套容器会把B和C视为一个不可拆分的整体，没法单独移动其中一个元素。

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