CSS Footer with responsive css

CSS Footer with responsive css

i am trying to create a CSS Footer with this CSS:
.footer {
width:100%;
background:#666666;
clear:both;
color:#FFFFFF;
}
.footer-container {
display:inline-block;
width:80%;
margin: 0 auto 0 auto;
}
.social_links {
float:left;
list-style:none;
display:inline;
}
.footer_text {
text-align:center;
}
.footer_logo {
float:right;
}
i want 3 columns, the left one fairly small just for facebook and twitter
social icons displayed next to each other (inline) the middle column for
text so that one larger and then the right one just for a small logo
i am trying to make it responsive too so as the page gets smaller, it goes
in order:- the left column (social links) / middle column (text - aligned
center) / the logo down the bottom
here is a fiddle with what i currently have but i cannot get it working as
above.
http://jsfiddle.net/eYwsm/1/