html - Move first div below second div via CSS only -

i have 2 divs inside container this:

<div id="container">    <div id="first">hello world</div>    <div id="second">i want @ top</div> </div> 

i want align first div below second div without changing html. how possible?

here css:

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

i aware can set position:fixed #second , align top there other way achieve this?

here jsfiddle.

the height of divs depending on content inside. fixed height above testing.

if know heights of div's, can use margin-top solve problem.

#container {     float:left;     width:100%; }  #first {     float:left;     width:100%;     background:lightblue;     height:200px;     margin-top: 200px; }  #second {     float:left;     height:200px;     width:100%;     background:yellow;     margin-top: -400px; } 

if not know heights, can use flexbox order property.

#container {     display: flex;     float:left;     width:100%;     flex-direction: column; }  #first {     order: 2;     float:left;     width:100%;     background:lightblue; }  #second {     order: 1;     float:left;     width:100%;     background:yellow; } 

as lyjackal mentioned in answer, can use column-reverse instead of column, reverses elements. choose suits best.