vertical layout with horizontal ordering

by Saksham Malhotra

HTML

<div class="cont">
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
  <div class="c">
    C
  </div>
  <div class="d">
    D
  </div>
  <div class="e">
    E
  </div>
</div>

CSS

* {
  box-sizing: border-box;  
}

.cont {
  background: #EEE;
}

.a,
.b,
.c, .d, .e {
  width: 50%;
  padding: 10px;
  float: left;
  margin: 10px 0px;
}

.a {
  background: red;
  height: 100px;
}

.b {
  background: lightblue;
  float: right;
  height: 200px;
}

.c {
  background: orange;
  height: 300px;
}

.d {
  background: green;
  float: right;
  height: 300px;
}

.e {
  background: magenta;
  height: 300px;
}

@media (max-width: 500px) {
  .a,
  .b,
  .c {
    width: auto;
    float: none;
  }
  
  .cont {
    display: flex;
    flex-direction: column;
  }
}