<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4">
      <div class="d-flex align-items-center justify-content-center h2 block">1</div>
    </div>
    <div class="col-12 col-md-6 col-xl-8">
      <div class="d-flex align-items-center justify-content-center h2 block">2</div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 order-4 order-xl-3">
      <div class="d-flex align-items-center justify-content-center h2 block">3</div>
    </div>
    <div class="col-12 col-xl-4 order-3 order-xl-4">
      <div class="d-flex align-items-center justify-content-center h2 block">4</div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 order-5">
      <div class="d-flex align-items-center justify-content-center h2 block">5</div>
    </div>
  </div>
</div>

body {
  margin-top: 30px;
  background-color: rgba(86,61,124,.05);
}

.block {
  height: 250px;
  color: #212529;
  background: rgba(86,61,124,.15);
  margin-bottom: 30px;
}