<div class="container">
  <div class="top">
    <div class="block block1"></div>
    <div class="block block2"></div>
  </div>
  <div class="bottom">
    <div class="block block3"></div>
  </div>
</div>
* {
  box-sizing: border-box;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.top {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.block {
  padding: 15px;
  background: #e6e6e6;
}

.block1, .block2 {
  width: 45%;
}


.block3 {
  min-height: 100px;
}
@media screen and (max-width: 768px) {
  .top {
    flex-direction: column;
  }
  
  .block1, .block2 {
    width: 100%;
  }
  
  .block1 {
    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.