CSS实现50%双栏布局移动端跨容器调整子元素显示顺序

核心思路是打破原有左右分栏的布局边界，通过CSS流控制属性调整子元素排序，不需要复杂的JS动态移动DOM节点，下面给两种可直接落地的方案：

方案1：无DOM侵入方案（推荐，兼容绝大多数现代浏览器） #

不需要改动现有DOM结构，核心靠display: contents消除左右两个列div的布局容器属性，让两侧的子元素直接归入父容器的布局流，再通过order属性控制移动端显示顺序。
保持原有DOM结构不变即可：

<div class="container">
  <div class="col-left">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="col-right">
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</div>

桌面端样式和原有逻辑一致，两栏各占50%宽度：

.container {
  display: flex;
  width: 100%;
}
.col-left, .col-right {
  width: 50%;
  display: flex;
  flex-direction: column;
}

移动端样式加断点适配，核心是取消列容器的布局实体属性，再给子元素按目标顺序设置order值：

/* 移动端断点可根据业务需求调整，示例以768px为界 */
@media (max-width: 767px) {
  .container {
    flex-direction: column;
  }
  .col-left, .col-right {
    width: 100%;
    /* 关键属性：让元素本身不生成布局盒，子元素直接提升到父容器布局流 */
    display: contents;
  }
  /* 按目标顺序给每个元素设置排序权重，值越小越靠前 */
  .col-left .item:nth-child(1) { order: 1; }
  .col-left .item:nth-child(2) { order: 2; }
  .col-right .item:nth-child(1) { order: 3; }
  .col-left .item:nth-child(3) { order: 4; }
  .col-right .item:nth-child(2) { order: 5; }
  .col-right .item:nth-child(3) { order: 6; }

  .container .item {
    width: 100%;
  }
}

注意：display: contents目前已覆盖Chrome 89+、Firefox 78+、Safari 15.4+的用户群体，占全球浏览器份额98%以上，仅不兼容IE11及更早版本，属性不会影响DOM原有事件冒泡、语义结构。

方案2：全兼容方案（适配极低版本浏览器） #

如果需要兼容IE等老旧浏览器，可以把DOM结构调整为扁平化结构，所有item直接放在容器下，桌面端通过网格布局把元素分配到左右两栏，移动端仅需调整单个元素的排序权重即可。
调整后的DOM结构：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

桌面端用Grid实现两栏布局，指定元素所属列：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
/* 1、2、3归左列 */
.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
  grid-column: 1;
}
/* 4、5、6归右列 */
.item:nth-child(4),
.item:nth-child(5),
.item:nth-child(6) {
  grid-column: 2;
}

移动端改为单列布局，仅需调整3和4的排序权重即可得到目标顺序：

@media (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
  }
  /* 默认所有元素order值为0，按DOM顺序排列，调整权重让4排在3前面 */
  .item:nth-child(3) {
    order: 1;
  }
  .item:nth-child(4) {
    order: 0;
  }
}

避坑提示 #

• 不要用绝对定位硬移动元素位置，会导致元素脱离文档流，高度无法自适应，后续新增内容很容易出现布局错位。
• order属性只改变视觉顺序，不会改变DOM本身的顺序，屏幕阅读器的阅读逻辑、Tab键切换顺序仍然遵循DOM顺序，如果区块内包含大量交互元素，优先选择DOM顺序和视觉顺序一致的实现逻辑。

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