<div class="wrap">
  <div class="col1">A</div>
  <div class="blocks">
    <div class="col2">B</div>
    <div class="col3">C</div>
   </div> 
</div>

* {padding: 0; margin: 0; box-sizing: border-box }
.blocks,
.wrap { display: flex; flex-wrap: wrap; justify-content: space-between }
.wrap div { flex-basis: 150px }
div.blocks { min-width: calc((100vw - 3 * 150px) / 2 + 2 * 150px); background-color: lightgray; }
@media (max-width: 450px) { div.blocks { min-width: 0 }}
.col1 { background-color: lime; height: 300px }
.col2 { background-color: orange; height: 150px }
.col3 { background-color: pink; height: 100px }