Floating divs for responsive website - html

Question

I'm trying to float divs for a responsive website and it's not working properly. I need them to be in the order below because when the screen gets smaller, they need to stack with 1 on top, then 2, the 3. The third div is not going nicely underneath the first div. Any help is 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, just to be clear, I need "3" to be underneath "1" but it's going underneath "2". Thanks!

Answer 1

Css Class shouldn't begin with number.
Demo
.one {
width:23%;
float:right;
}
.two {
width:76%;
float:left;
}
.three {
float:right;
width:23%;
}

Answer 2

I guess this is what you want Demo
* {
box-sizing: border-box;
}
.one {
width:23%;
float:left;
background-color: #333;
}
.two {
width:76%;
float:left;
background-color: #666;
}
.three {
float:left;
width:23%;
background-color: #ddd;
}

Answer 3

I guess using inline block will work. Even if you resize the window without the percentage width.
.one {
width:23%;
display: inline-block;
color: yellow;
}
.two {
width:76%;
display: inline-block;
color: orange;
}
.three {
display: inline-block;
color: red;
width:23%;
}
Demo

Answer 4

your code was right, except that css-classes must not start or only contain a number. DIV.two does not nedd to float:
<div class="one">info 1</div>
<div class="two">info 2</div>
<div class="three">info 3</div>
And the css:
.one {
width:23%;
float:right;
background-color: yellow;
}
.two {
width:76%;
background-color: grey;
}
.three {
float:right;
width:23%;
background-color: red;
}
See the fiddle.