借助Media Queries调整布局顺序的可行性咨询

完全可行，用Flexbox结合媒体查询就能解决你的问题，以下是具体实现思路和代码：

核心思路 #

• 父容器设置为display: flex，通过flex属性控制子元素的宽度占比，实现分栏；
• 利用媒体查询区分桌面/移动端布局，桌面端通过justify-content或order属性确保div2在右侧。

代码示例 #

<div class="parent-container">
  <div class="div-1">Div 1</div>
  <div class="div-2">Div 2</div>
</div>

/* 基础样式 - 移动端默认布局 */
.parent-container {
  display: flex;
  width: 100%;
  gap: 1rem; /* 子元素间距，替代margin更方便 */
}

.div-1, .div-2 {
  flex: 1; /* 移动端两栏均分 */
  padding: 1.5rem;
  background-color: #f0f0f0;
}

/* 桌面端布局（断点可根据需求调整） */
@media (min-width: 768px) {
  /* 保持两栏均分，div2自然在右侧；若DOM顺序与视觉顺序不符，用order调整 */
  .div-1, .div-2 {
    flex: 0 0 48%; /* 固定宽度占比，避免内容影响布局 */
  }
  
  /* 假设DOM中div2在div1前面，需要调整视觉顺序时用： */
  /* .div-1 { order: 1; } */
  /* .div-2 { order: 2; } */
}

关键说明 #

• flex: 0 0 48% 中的0 0表示禁止子元素收缩/拉伸，固定宽度占比，比单独用grow/shrink更可控；
• gap属性用于设置子元素间距，比margin更简洁；
• 如果你的DOM结构中div2的位置在前，通过order属性可以轻松调整视觉顺序，无需修改HTML。

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