Move DIV to Right form Bottom with relative to Top DIV - css

Question

I have following Scenario
http://jsfiddle.net/EYGhf/63/
<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; /* Just Example, Actual is Dynamic*/
width:100px;
float:left;
}
#second_div {
background: cyan;
height: 300px;/* Just Example, Actual is Dynamic*/
width:100px;
clear:left;
}
#third_div{
width:100px;
float:left;
background:blue;
}

Answer 1

You could set position:absolute on 3rd item, and use media queries set it back to static for mobile.
JSFiddle Demo: http://jsfiddle.net/ytr1j3r7/ (resize the output frame and see)
body {
margin: 0;
}
.wrapper {
position: relative;
max-width: 400px;
}
.wrapper > div {
height: 100px;
width: 200px;
}
#first_div {
background: yellow;
}
#second_div {
background: cyan;
}
#third_div {
background: teal;
position: absolute;
top: 0;
right: 0;
}
#media (max-width: 399px) {
#third_div {
position: static;
}
}
<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>