响应时将第1分区移至第2分区

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”之后？我是否必须更改位置并使用顶部手动设置？还有其他方法吗？

谢谢

Answer 1

您可以使用order进行媒体查询。

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<div class="box">

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

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

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

Answer 3

使用媒体查询和弹性订单。

＆＃13;

＆＃13;

.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;
    }
}

＆＃13;

<div class="box">

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

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