Move DIV to Right form Bottom with relative to Top DIV

I have following Scenario

http://ift.tt/1HDFdZj

<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>    
</div>

I want third div to be next to first div, first and second would be in same column, if right space is not available, i.e. on mobile, third div would float to bottom.

Current CSS that is applied goes as

.wrapper{
widht:250px;
}
#first_div {
background: yellow;
height: 200px; 
width:100px;
float:left;
}

#second_div {
background: cyan;
height: 300px;
width:100px;
clear:left;    
}
#third_div{
width:100px;
float:left;
background:blue;
}