主页 / user-1126760

pab's questions

Martin Hope
pab
Asked: 2025-02-13 06:08:05 +0800 CST
  • 5

因此，我在尝试在移动设备上交换 div 1 和 div 2 时遇到了问题。

移动顺序应为 div 1、2 和 3 按该顺序堆叠。

然后在 768px 以上，需要按照以下顺序将 div 2 放在左侧，设置为 30% 宽度。然后在右侧，需要堆叠 div 1 和 div 3，以占据右侧的剩余部分。

不确定我该怎么做。我试过不用包装器，但没能成功，这是我能做到的最接近的了。

有人能帮帮我吗？

.container {
  display: flex;
  flex-direction: column; 
  gap: 10px;
}


@media (min-width: 768px) {
  .container {
    flex-direction: row; 
  }

  .specs {
    flex: 0 0 30%; 
    order: 1; 
  }

  .content-buttons {
    flex: 0 0 70%; 
    display: flex;
    flex-direction: column; 
    gap: 10px;
    order: 2; 
  }

  .content {
    flex: 1; 
    order: 1;
  }

  .buttons {
    flex: 1; 
    order: 2;
  }
}

/* Borders for visualization */
.content {border: 1px solid red;}
.specs {border: 1px solid green;}
.buttons {border: 1px solid blue;}
<div class="container">
  <div class="specs">2</div>
  <div class="content-buttons">
    <div class="content">1</div>
    <div class="buttons">3</div>
  </div>
</div>

html