<!-- Part 1 -->
<div class="row">
  <section class="pink col-1-4 col-md-1-2">1</section>
  <section class="green col-1-4 col-md-1-2">2</section>
  <section class="blue col-1-4 col-md-1-2">3</section>
  <section class="purple col-1-4 col-md-1-2">4</section>
</div>

<!-- Part 2 -->
<div class="row">
  <section class="blue col-1-2">1</section>
  <section class="purple col-1-2">2</section>
</div>

<!-- <div class="row">
  <section class="pink col-2-3">1</section>
  <section class="green col-1-3">2</section>
</div>

<div class="row">
  <section class="pink col-full">1</section>
</div> -->
.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.col-1-4 {
  width: 25%;
}
.col-1-3 {
  width: 33.333333%;
}
.col-2-3 {
  width: 66.666667%;
}
.col-1-2 {
  width: 50%;
}
.col-full {
  width: 100%;
}


/* Part 3 */
@media screen and (max-width: 970px) {
  .col-md-1-4 {
    width: 25%;
  }
  .col-md-1-2 {
    width: 50%;
  }
  .col-md-full {
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  .col-sm-full {
    width: 100%;
  }
}


body {
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
  color: white;
}
.pink {
  background-color: #E8519C;
}
.green {
  background-color: #59B776;
}
.blue {
  background-color: #00A6B3;
}
.purple {
  background-color: #C879B2;
}
section { height: 40px; margin-bottom: 20px; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.