方法一：使用CSS Grid（推荐，布局逻辑更清晰） #

这种方式无需额外嵌套容器，直接通过网格区域定义元素位置，适配需求更高效。

HTML 结构

<div class="container">
  <div class="content">1</div>
  <div class="specs">2</div>
  <div class="buttons">3</div>
</div>

CSS 代码

.container {
  /* 移动端默认垂直堆叠，自然顺序就是1、2、3 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .container {
    /* 桌面端切换为网格布局 */
    display: grid;
    /* 定义两列，左侧30%宽度，右侧70% */
    grid-template-columns: 30% 70%;
    /* 定义网格区域：左侧是specs，右侧上为content、下为buttons */
    grid-template-areas: 
      "specs content"
      "specs buttons";
    gap: 10px;
  }

  .specs {
    grid-area: specs; /* 绑定到左侧网格区域 */
  }

  .content {
    grid-area: content; /* 绑定到右侧上方区域 */
  }

  .buttons {
    grid-area: buttons; /* 绑定到右侧下方区域 */
  }
}

/* 可视化边框，方便调试 */
.content {border: 1px solid red;}
.specs {border: 1px solid green;}
.buttons {border: 1px solid blue;}

方法二：基于Flex布局调整（贴合你原有的实现思路） #

如果坚持使用Flex，只需调整HTML结构和order属性即可实现需求：

HTML 结构

<div class="container">
  <div class="content">1</div>
  <div class="specs">2</div>
  <div class="buttons">3</div>
</div>

CSS 代码

.container {
  /* 移动端默认垂直堆叠，自然顺序满足1、2、3 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap; /* 允许元素换行 */
  }

  .specs {
    flex: 0 0 30%; /* 固定左侧30%宽度 */
    order: 1; /* 调整顺序到左侧 */
    align-self: stretch; /* 让specs占满左侧高度 */
  }

  .content {
    flex: 0 0 70%; /* 右侧元素占70%宽度 */
    order: 2; /* 右侧第一个元素 */
  }

  .buttons {
    flex: 0 0 70%; /* 右侧元素占70%宽度 */
    order: 3; /* 右侧第二个元素 */
  }
}

/* 可视化边框，方便调试 */
.content {border: 1px solid red;}
.specs {border: 1px solid green;}
.buttons {border: 1px solid blue;}

关键说明 #

• 两种方法都保证了移动端元素自然顺序为1、2、3，无需额外调整order，符合语义化要求。
• 桌面端通过Grid区域或Flex的order+flex-wrap实现左侧30%的specs，右侧垂直堆叠content和buttons的布局。

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