Issue on Positioning .span inside a .row - css

Question

I am having lots of problems on positioning three column inside a .row using .span Can you please take a look at THIS LINK and let me know what I am doing wrong! on here?
if you check the page in iPhone 5 landscape orientation you will see that all there spans will line up under each other but I would like to keep two first at the first line. Here is what happening:
and this is what I would like to have:
also in big screens the third span is not fitting at the right end part:
or in iPhone 5 portrait view I woud like to center the image but it looks like:
Thanks for your time

Answer 1

Bootstrap makes all spanX elements display as block in small screens, so you can try adding a new class to make your spans float on small screens too, also I suggest you use the .row-fluid class and float your .social-wrap to make it align to the right
HTML
<div class="row-fluid">
<div class="span2 floatSmall">
<img />
</div>
<div class="span4 floatSmall">
<!--YOUR .span4 CONTENT-->
</div>
<div class="span6">
<div class="footer-body">
<div class="social-wrap">
<ul id="social-networking">
<!--YOUR SOCIAL LINKS-->
</ul>
</div>
</div>
</div>
</div>
CSS
.social-wrap {
float: right;
/*remove the width you have set*/
}
#media (max-width: 767px){
.floatSmall {
width: auto!important;
float: left!important;
}
}