Move 1st Div to 2nd Div on responsive

Issue

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

How to move the first div "class1" to be after second div "class2" on tablet view? Do I have to change the position and set manually using top? Is there any other way than that?

Solution

You can use order, with media queries.

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

Answered By - Hash