如何通过媒体查询实现移动端与桌面端的Div顺序切换？

当然可以！媒体查询就是专门用来解决不同屏幕尺寸下布局适配需求的工具，不管你用桌面优先还是移动端优先的方案，都能轻松实现移动端特定的Div排列效果，下面给你具体拆解两种方案的实现思路和代码示例：

这种方案是先写好桌面端的布局样式（作为默认样式），然后通过媒体查询针对更小的屏幕（移动端）覆盖调整布局规则。适合已经完成桌面端开发，需要补做移动端适配的场景。

举个例子，假设桌面端是3个Div横向并排，移动端要改成垂直堆叠：

HTML结构 #

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS样式 #

/* 桌面端默认样式：三个盒子横向并排 */
.container {
  display: flex;
  gap: 1.25rem; /* 20px的相对单位写法 */
}

.box {
  width: 33.33%;
  padding: 1.25rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* 移动端断点（这里用768px作为平板/手机的分界，你可以根据需求调整） */
@media (max-width: 768px) {
  /* 把flex布局改成垂直方向 */
  .container {
    flex-direction: column;
  }
  
  /* 让每个盒子占满容器宽度 */
  .box {
    width: 100%;
  }
}

这种方案是先写移动端的布局样式（作为默认样式），再通过媒体查询针对更大的屏幕（桌面端）扩展布局规则。现在很多前端项目会优先选择这种方案，因为移动端用户占比高，且从基础样式往上扩展更不容易出问题。

还是用上面的HTML结构，移动端优先的CSS写法如下：

/* 移动端默认样式：盒子垂直堆叠 */
.container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.box {
  width: 100%;
  padding: 1.25rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* 桌面端断点（同样用768px，可按需调整） */
@media (min-width: 768px) {
  /* 把flex布局改成横向排列 */
  .container {
    flex-direction: row;
  }
  
  /* 让每个盒子平分容器宽度 */
  .box {
    width: 33.33%;
  }
}

小提示 #

• 断点选择：常用的移动端断点有360px（手机小屏）、768px（平板）、1024px（桌面小屏），你可以根据自己的设计稿选择合适的断点。
• 布局属性：除了Flexbox，CSS Grid也能配合媒体查询实现复杂的排列调整，核心思路都是在媒体查询里覆盖对应的布局属性（比如grid-template-columns、flex-direction等）。

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