Move first div below second div via CSS only

I have 2 divs inside a container like this:

<div id="container">
   <div id="first">Hello World</div>
   <div id="second">I want to be at the top</div>
</div>

I want to align the first div below the second div without changing the HTML. How is this possible?

Here is my CSS:

#container {
    float:left;
    width:100%;
}

#first {
    float:left;
    width:100%;
    height:200px;
}

#second {
    float:left;
    height:200px;
    width:100%;
}

I am aware I can set position:fixed to #second and align it to the top but is there any other way to achieve this?

Here is a jsFiddle.