SOURCE

<div class="col">col-1</div>
<div class="col">col-2</div>
<div class="col">col-3</div>
<div class="col">col-4</div>

* {
  box-sizing: border-box;
}


.col {
  background-color: #e6e2eb;
  border: 1px solid #c9c1d5;
  height: 2rem;
  line-height:2rem;
  text-align:center;
  margin:.5rem 0;
  
  display:inline-block;
}

@media screen and (max-width: 575.98px) {
  .col {
/*     background-color: red; */
    width: 100%;
  }
}

@media screen and (max-width: 767.98px) and (min-width: 576px) {
  .col {
/*     background-color: green; */
    width: 50%;
  }
}

@media screen and (max-width: 991.98px) and (min-width: 768px) {
  .col {
/*     background-color: blue; */
    width: 33.3333%;
  }
}

@media screen and (max-width: 1199.98px) and (min-width: 992px) {
  .col {
/*     background-color: blue; */
    width: 25%;
  }
}


@media screen and (min-width: 1200px) {
  .col {
/*     background-color: blue; */
    width: 22%;
  }
}