CSS媒体查询下如何让右侧div移至顶部（不交换DOM结构）

方法一：Flexbox（推荐方案） #

这是最简洁可靠的实现方式，利用Flex布局的方向反转特性就能搞定：

/* 按需调整媒体查询的宽度阈值，这里以768px为例 */
@media (max-width: 768px) {
  #wrapper {
    text-align: left; /* 清除原有的居中设置，避免干扰Flex布局 */
    display: flex;
    flex-direction: column-reverse; /* 直接反转垂直排列顺序 */
    align-items: center; /* 可选：保持内容水平居中 */
    gap: 1.5rem; /* 给两个元素添加间距，优化移动端体验 */
  }
  .bob1, .bob2 {
    display: block; /* 移除inline-block */
    width: 100%; /* 移动端占满容器宽度，也可自定义成需要的尺寸 */
  }
}

方法二：CSS Grid #

如果更习惯用Grid布局，也可以通过指定元素的行位置来交换顺序：

@media (max-width: 768px) {
  #wrapper {
    text-align: left;
    display: grid;
    gap: 1.5rem;
  }
  .bob1 {
    display: block;
    width: 100%;
    grid-row: 2; /* 让bob1排在第二行 */
  }
  .bob2 {
    display: block;
    width: 100%;
    grid-row: 1; /* 让bob2排在第一行 */
  }
}

方法三：兼容旧浏览器的Transform方案 #

如果需要兼容不支持Flex/Grid的老浏览器，可以用位移的方式实现，但这种方法需要提前确定元素高度，适合内容固定的场景：

@media (max-width: 768px) {
  #wrapper {
    position: relative;
    padding-top: 300px; /* 数值等于bob2的实际高度 */
  }
  .bob1, .bob2 {
    display: block;
    width: 100%;
    position: relative;
  }
  .bob2 {
    transform: translateY(-100%);
    margin-bottom: -300px; /* 和padding-top数值一致 */
  }
}

提示：方法三的维护成本较高，优先推荐前两种现代布局方案。

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