html css layout not rendering as intended

I am creating a responsive webpage.

This is what i am trying to do. jsfiddle

<div id="container">
    <div id="one">#one</div>
    <div id="two">#two</div>
    <div id="three">#three</div>
    <div id="four">#four</div>
    <div id="five">#five</div>
</div>

In desktop view I want #five to touch the bottom of #three.

When you make the screen size small (mobile view) the divs are arranged correctly in order.

How can I make #five touch the bottom of #three in desktop view?