移动端如何重排多个div元素实现指定响应式布局效果？

为什么jQuery移动DOM不是最优方案 #

这种方式存在几个明显的问题：

• 依赖JavaScript运行，一旦用户禁用JS，移动端布局会直接出错
• 窗口尺寸变化时频繁操作DOM会触发多次重排重绘，性能表现差
• 后续调整布局需要同时维护JS逻辑和CSS样式，维护成本更高
• 部分特殊场景下（比如屏幕旋转）容易出现布局错乱的边界问题

更简便的纯CSS实现方案 #

完全不需要写JS，用CSS Grid布局配合order属性就能实现，推荐优先用这种方案。

方案1：微调HTML结构（更灵活，推荐） #

把所有square元素放到同一个父容器中，不用拆分两行，后续调整布局也更方便：

<div class="square-wrapper">
  <div class="square">square 1</div>
  <div class="square">square 2</div>
  <div class="square square-3">square 3</div>
  <div class="square">square 4</div>
  <div class="square">square 5</div>
  <div class="square square-6">square 6</div>
</div>

对应的CSS代码：

.square-wrapper {
  display: grid;
  gap: 16px; /* 元素间距可自行调整 */
}

/* 大屏样式：768px以上显示2行3列 */
@media (min-width: 768px) {
  .square-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 移动端样式：768px以下显示顶部4个、底部2个 */
@media (max-width: 767px) {
  .square-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
  /* 调整3和6的顺序到最后两位 */
  .square-3 {
    order: 5;
  }
  .square-6 {
    order: 6;
  }
  /* 底部两个元素各占一半宽度，单独成一行 */
  .square-3, .square-6 {
    grid-column: span 2;
  }
}

方案2：不改动原有HTML结构 #

如果必须保留原来的两行结构，可以用display: contents消除row的层级限制，实现和上面一样的效果：

/* 给原有两个row外层加一个父容器 */
.layout-wrapper {
  display: grid;
  gap: 16px;
}
.row {
  display: contents; /* 让row的子元素直接作为layout-wrapper的子元素参与网格布局 */
}

/* 大屏样式 */
@media (min-width: 768px) {
  .layout-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 移动端样式 */
@media (max-width: 767px) {
  .layout-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
  /* 选中每行的第三个元素 */
  .row .square:nth-child(3) {
    grid-column: span 2;
  }
  .row-1 .square:nth-child(3) {
    order: 5;
  }
  .row-2 .square:nth-child(3) {
    order: 6;
  }
}

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