<div class="row">
  <div class="container">
    <div class="wrap-box d-flex-row">
      <div class="box pink col-1">1</div>
      <div class="box orange col-2">2</div>
      <div class="box yellow col-3">3</div>
      <div class="box gray col-4">4</div>
    </div>
  </div>
</div>
.container{
  width:1160px;
  max-width:90%;
  margin:20px auto
}
.d-flex-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  text-align:center
}
.box{
  padding:20px;
  font-size:30px;
  min-height:100px;
}
.pink{
  background:#f77171
}
.orange{
  background:#f89e52
}
.yellow{
  background:#f4d460
}
.gray{
  background:#d3d3d3
}
.box:nth-child(1){
    grid-column:span 3
}
.box:nth-child(2){
  grid-row:span 4
}
.box:nth-child(3),
.box:nth-child(4){
  grid-row:span 2;
  grid-column:span 2
}
@media(max-width:680px){
  .d-flex-row{
    grid-template-columns:auto;
  }
  .wrap-box .box{
    grid-column:auto
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.