在响应式设计中将第一个Div移动到第二个Div上

Question

.box {
  display: block;
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
}

.class1 {
  position: relative;
  color: red;
}

.class2 {
  position: relative;
  color: red;
}

<div class="box">

  <div class="class1">
    The First Thing
  </div>

  <div class="class2">
    The Second Thing
  </div>
  
</div>

如何在平板视图下将第一个div“class1”移动到第二个div“class2”之后？我需要手动更改位置并使用top进行设置吗？除此之外还有其他方法吗？

- Rendy Juvi

Answer 1

您可以使用媒体查询和 order 属性。

.box {
  display: block;
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
}

.class1 {
  position: relative;
  color: red;
}

.class2 {
  position: relative;
  color: red;
}

@media screen and (max-width: 531px) {
  .box {
    display: flex;
    flex-flow: column;
  }
  .class2 {
    order: 1;
  }
  .class1 {
    order: 2;
  }
}

<div class="box">

  <div class="class1">
    The First Thing
  </div>

  <div class="class2">
    The Second Thing
  </div>

</div>

- Hash

Answer 2

使用媒体查询和flex顺序。

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
  display:flex;
  flex-flow:column;
}

.class1 {
  position: relative;
  color: red;
}

.class2 {
  position: relative;
  color: red;
}

@media(max-width: 768px) {
    .class1 {
       order: 2;
    }
    .class2 {
       order: 1;
    }
}

<div class="box">

  <div class="class1">
    The First Thing
  </div>

  <div class="class2">
    The Second Thing
  </div>
  
</div>

- Azel Tan

Answer 3

使用网格布局。Bootstrap、PrimeNg和其他许多框架都有提供它们。

- Dennis Flagg

---

这应该是一条评论，而不是答案。 - Harsh Patel

Answer 4

如果您正在使用Bootstrap，我们可以做到这一点。

<div class="order-2 order-md-1">detail</div>
<div class="order-1 order-md-2">photo</div>

当在桌面尺寸时，detail将位于左侧

当在移动设备尺寸时，detail将位于底部

- Pagorn

Answer 5

.box {
  display: flex;
  flex-direction: row | column
}

@media screen and (...) {
  .box {
     flex-direction: row-reverse | column-reverse
  }
}

- Alruna L