使我的页脚图标不会叠加在一起，同时减少页面的宽度

I'm currently using bootstrap 3 to build my webpage and I'm using a footer along the bottom to contain links to various social media pages using small 24x24 icons. when the page is wide enough they all line up next to each other (floating to the right), however when I condense the page they stack on top of each other, making the footer very tall, how would I go about changing this so that even when they go onto a smaller screen, such as a condensed PC window, a phone, or tablet, they stay next to each other, rather that stacking on top of each other. Here is what I have so far:I'm currently using bootstrap 3 to build my web