如何用CSS实现桌面到移动端的响应式布局（Div重排需求）

当然可以实现！不用改动任何HTML结构，咱们完全靠CSS就能搞定这个需求——在移动端把Div A渲染到Div B之后，同时保留桌面端的原有布局。下面给你两种常用的方案：

方案一：Flexbox + Order 属性 #

Flexbox的order属性可以直接调整元素的渲染顺序，完全不影响HTML源码结构，是处理这类顺序调整需求的轻量方案。

基础HTML结构 #

<div class="container">
  <div class="box a">A</div>
  <div class="box red">Red</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

CSS 实现代码 #

/* 全局基础样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

.box {
  padding: 2rem;
  margin: 0.5rem 0;
  border: 1px solid #333;
}

.a { background-color: #f0f0f0; }
.red { background-color: #ffcccc; }
.b { background-color: #ccffcc; }
.c { background-color: #ccccff; }
.d { background-color: #ffffcc; }

/* 移动端布局（默认，屏幕宽度≤768px） */
.container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 调整移动端渲染顺序：Red → B → A → C → D */
.a { order: 3; }
.red { order: 1; }
.b { order: 2; }
.c { order: 4; }
.d { order: 5; }

/* 桌面端布局（屏幕宽度>768px） */
@media (min-width: 769px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .a {
    flex: 0 0 30%;
    order: initial; /* 恢复默认顺序，让A回到左侧 */
  }

  /* 右侧元素占剩余宽度，恢复默认顺序 */
  .red, .b, .c, .d {
    flex: 0 0 65%;
    order: initial;
  }
}

方案二：CSS Grid 布局 #

Grid布局通过定义网格区域，能更直观地控制每个元素的位置，适合布局结构更复杂的场景，可读性更强。

同样用上面的HTML结构，CSS代码如下： #

/* 全局基础样式和上面一致，这里省略 */

/* 移动端布局（默认） */
.container {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  /* 直接定义网格区域顺序 */
  grid-template-areas:
    "red"
    "b"
    "a"
    "c"
    "d";
}

/* 给每个元素指定对应的网格区域 */
.a { grid-area: a; }
.red { grid-area: red; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

/* 桌面端布局 */
@media (min-width: 769px) {
  .container {
    grid-template-columns: 30% 65%; /* 两列布局 */
    grid-template-areas:
      "a red"
      "a b"
      "a c"
      "a d";
  }
}

这两种方案都完全满足你的需求：不用改动HTML结构，仅通过CSS就能在移动端把A渲染到B的后面，同时保持桌面端的布局效果。你可以根据自己的实际布局复杂度选择更合适的方案~

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