移动端响应式布局：将右侧div4移入左侧navbar容器并置于div2上方

针对你要在移动端把div4移入<navbar>容器并置于div2上方的需求，推荐两种简洁方案，按需选择：

方案一：不修改DOM结构（纯CSS快速实现） #

适合不想改动现有HTML结构的场景，利用Flex布局的order属性配合媒体查询调整视觉顺序：

1. 先给<navbar>设置Flex布局并允许换行：

navbar {
  display: flex;
  flex-wrap: wrap;
  /* 保留你原有navbar的其他样式 */
}

2. 给四个div设置默认排序，再在移动端媒体查询中重排：

/* 桌面端默认顺序 */
.div1 { order: 1; }
.div2 { order: 2; }
.div3 { order: 3; }
.div4 { order: 4; }

/* 移动端断点（示例用768px，可根据你的需求调整） */
@media (max-width: 768px) {
  .div4 {
    order: 2;
    width: 100%; /* 让div4占满整行，和navbar内元素对齐 */
    /* 可添加和navbar内元素一致的内边距/外边距，保证样式统一 */
  }
  .div2 { order: 3; }
}

注：这种方式只是视觉上调整位置，DOM里div4仍在navbar外，但移动端会和navbar内元素按指定顺序排列，完全符合需求效果。

方案二：调整DOM结构（语义化更优） #

如果允许修改HTML结构，把div4提前放入navbar内，再用媒体查询控制不同端的显示顺序，这种方案更符合语义化，无障碍体验更好：

1. 修改后的HTML结构：

<navbar>
  <div class="div1">div1</div>
  <div class="div4">div4</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</navbar>

2. 配合CSS媒体查询适配两端：

navbar {
  display: flex;
  flex-wrap: wrap;
}

/* 桌面端：让div4显示在navbar下方 */
@media (min-width: 769px) {
  .div4 {
    order: 4;
    width: 100%; /* 占满整行，和navbar主体区分开 */
  }
}

/* 移动端：让div4排在div2上方 */
@media (max-width: 768px) {
  .div4 {
    order: 2;
    width: 100%;
  }
  .div2 { order: 3; }
}

选择建议 #

• 若不想动现有DOM，直接用方案一，代码改动最少；
• 若追求语义化和无障碍体验，优先选方案二。

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