Change Order of divs for Responsive Layout

This CSS code helps to create a responsive layout for a web page with a change order of divs elements. It uses the CSS flex property to arrange the child elements in a vertical column. The order property sets the order of these boxes, but when the screen size is smaller than 500px, their order is switched.

How to Change Order Of divs for Responsive Layout

First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML structure as follows:

<div class="wrapper">
  <div class="kutija1">
  <div class="inner">
    Im box 1 - first in order on destop and last in order on mobile
  </div>
</div>
<div class="kutija2">
  <div class="inner">
    Im box 2 - last in order on destop and first in order on mobile
  </div>
</div>
</div>

Style using the following CSS styles:

.wrapper {
  display: flex;
  flex-direction: column;
}
.wrapper .kutija1 {
  width: 50%;
  height: 300px;
  background: lightblue;
  margin: 20px auto;
  position: relative;
  order: 1;
}
@media (max-width: 500px) {
  .wrapper .kutija1 {
    order: 2;
  }
}
.wrapper .kutija1 .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.wrapper .kutija2 {
  width: 50%;
  height: 300px;
  background: #b4da77;
  margin: 20px auto;
  position: relative;
  order: 2;
}
@media (max-width: 500px) {
  .wrapper .kutija2 {
    order: 1;
  }
}
.wrapper .kutija2 .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.cd__main{
display : block ! important ;
}

That’s all! hopefully, you have successfully changed the order of div elements for responsiveness. If you have any questions or suggestions, feel free to comment below.