html - Floating divs for responsive website -

i'm trying float divs responsive website , it's not working properly. need them in order below because when screen gets smaller, need stack 1 on top, 2, 3. third div not going nicely underneath first div. appreciated!

<div class="1">info</div> <div class="2">info</div> <div class="3">info</div>  .1 { width:23%; float:right; } .2 { width:76%; float:left; } .3 { float:right; width:23%; } 

again, clear, need "3" underneath "1" it's going underneath "2". thanks!

css class shouldn't begin number.

demo

.one { width:23%; float:right; } .two { width:76%; float:left; } .three { float:right; width:23%; }