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

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 next first div, first , second in same column, if right space not available, i.e. on mobile, third div float bottom.

current css applied goes as

.wrapper{ widht:250px; } #first_div { background: yellow; height: 200px; /* example, actual dynamic*/ width:100px; float:left; }  #second_div { background: cyan; height: 300px;/* example, actual dynamic*/ width:100px; clear:left;     } #third_div{ width:100px; float:left; background:blue; } 

you set position:absolute on 3rd item, , use media queries set static mobile.

jsfiddle demo: http://jsfiddle.net/ytr1j3r7/ (resize output frame , 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>