Responsive grid width different height columns

I'm trying to recreate this:

Using HTML/CSS, so that each colored block is a div that I can add content into. It needs to be responsive, but I think I can work that out using Media Queries.

I've managed to get the layout working for all blocks, apart from the bottom left one! I just can't get it to slot into the gap under the top left block.

Here's my HTML:

<div class="container">
  <div class="box one">
    1
  </div>
  <div class="box two">
    2
  </div>
  <div class="box three">
    3
  </div>
  <div class="box four">
    4
  </div>
  <div class="box five">
    5
  </div>
  <div class="box six">
    6
  </div>
</div>

and my CSS:

.box {
  display:inline-block;
  margin:0;
  float:left;
}

.one {
  background:#000;
  color:#fff;
  width:40%;
  height:400px;
}
.two {
  background:#ddd;
  color:#000;
  width:60%;
  height:200px;
}
.three {
  background:#efefef;
  color:#000;
  width:30%;
  height:400px;
}
.four {
  background:#222;
  color:#fff;
  width:30%;
  height:200px;
}
.five {
  background:#754;
  color:#fff;
  width:30%;
  height:200px;
}
.six {
  background:#c3d;
  color:#fff;
  width:30%;
  height:200px;
}

I set it up in Codepen

Does anyone know how to get that final "6" div to slot in under "1"?

If you are willing to use CSS Grid. Then I'd recommend using it. Plus, it makes the code a lot easier to handle.

Here's the css:

.container {
    display: grid;
    grid-template-areas:
    "one two two"
    "one three four"
    "five three six";
}

.box{
  min-height: 200px;
}

.one {
    background: #000;
    color: #fff;
    grid-area: one;
}
.two {
    background: #ddd;
    color: #000;
    grid-area: two;
}
.three {
    background: #efefef;
    color: #000;
    grid-area: three;
}
.four {
    background: #222;
    color: #fff;
    grid-area: four;
}
.five {
    background: #754;
    color: #fff;
    grid-area: five;
}
.six {
    background: #c3d;
    color: #fff;
    grid-area: six;
}

And here's a codepen: https://codepen.io/anon/pen/vQLOxy

In my example, I'm using named grid areas. If you want to swap one of the blocks positions with another. You can swap their grid-area properties.

If you do choose this option, I'd recommend you look more into CSS Grid, as it makes life a lot easier. Here's an article where you can read up on it more: https://css-tricks.com/snippets/css/complete-guide-grid/