<div class="grid">
  <div class="card">
    <div class="card-main">
      <p><b>500 <i class="icon-plus"></i></b> Happy client</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr1.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>1000 <i class="icon-plus"></i></b> Equipments</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr2.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>100 <i class="icon-plus"></i></b> Expert Trainers</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr3.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>150 <i class="icon-plus"></i></b> Award win</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr4.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>20 <i class="icon-plus"></i></b> Personal Trainers</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr6.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>100 <i class="icon-plus"></i></b> Class Room</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr5.jpg" alt="" title="">
    </div>
  </div>




  <div class="card">
    <div class="card-main">
      <p><b>500 <i class="icon-plus"></i></b> Happy client</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr1.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>1000 <i class="icon-plus"></i></b> Equipments</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr2.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>100 <i class="icon-plus"></i></b> Expert Trainers</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr3.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>150 <i class="icon-plus"></i></b> Award win</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr4.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>20 <i class="icon-plus"></i></b> Personal Trainers</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr6.jpg" alt="" title="">
    </div>
  </div>

  <div class="card">
    <div class="card-main">
      <p><b>100 <i class="icon-plus"></i></b> Class Room</p>
    </div>
    <div class="card-cover">
      <img src="https://cardubai.vl-it.ru/media/img/pr5.jpg" alt="" title="">
    </div>
  </div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: flex;
}
.card-main {
  background: #ef8b35;
  color: #fff;
  position: relative;
  width: 50%;
}
.card-main p {
  position: absolute;
  left: 30px;
  bottom: 30px;
  right: 30px;
  text-transform: uppercase;
  line-height: 18px;
}
.card-main p b {
  font-weight: 800;
  font-size: 20px;
  display: block;
  padding-bottom: 5px;
}
.card-cover {
  width: 50%;
}
.card-cover img {
  width: 100%;
  display: block;
}

@media (max-width: 960px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .card:nth-child(4n + 4),
  .card:nth-child(4n + 3) {
    flex-direction: row-reverse;
  }
}

@media (min-width: 961px) {
  .card:nth-child(6n + 6),
  .card:nth-child(6n + 5),
  .card:nth-child(6n + 4) {
    flex-direction: row-reverse;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.