Q:

How to make 4 divs float left and one float right with this order?

I want to make this 5 divs float left and right with this order:
1 4
2 4
3 4
5 4
Only if the screen width is more than 600px and less than 1024px.
The div 4 has the height of all other divs together, and if the screen width is less than 600px I want to display them one below each other like this:
1
2
3
4
5
Here's my example code:
<div class=group>
  <div class="block one">Block One Left</div>
  <div class="block two">Block Two Left</div>
  <div class="block three">Block Three Left</div>
  <div class="block four">Block Four right</div>
  <div class="block five">Block Five Left</div>
</div>

And my css:
.group {
  width: 700px;
  margin: 0 auto;
}
.block {
  width: 200px;
  display: inline-block;
  background: #333;
  margin: 5px;
  text-align: center;
  color: white;
}
.one, .two, .three, .five {
  height: 30px;
}
.four {
  height: 160px;
}

And a codepen to illustrate the situation:
http://codepen.io/anon/pen/NberNM
Any ideas on how to make this work?

A:

If you know what the element widths are, you could always position it absolute (make sure to relative position the container). 
http://codepen.io/anon/pen/rWoLgx
To only do it if the device width is less than 600px:
@media screen and (max-width: 600px) { 
    .four {
      height: 160px;
      position: absolute;
      left: 220px;
      top: -5px;
    }
}

Note, I've also used flex on the blocks to align them how they are but this could be done using display block.
http://codepen.io/anon/pen/XNoKLK

