I'm setting up some social media icons, and it works well except for the fact that the Facebook one isn't working well with columns.

When it's a small screen they should all have 2 columns, however Facebook's icon is still taking 12.

My code:

```
<a href="https://www.facebook.com/"><i class="fa fa-facebook-square fa-2x col-xs-12 col-sm-2 col-md-2" style="text-align:center;"></i></a>

<a href="https://twitter.com/"><i class="fa fa-twitter fa-2x col-xs-0 col-sm-2 col-md-2"  style="text-align:center;"></i></a>

<a href="https://www.instagram.com/"><i class="fa fa-instagram fa-2x col-xs-0 col-sm-2 col-md-2"  style="text-align:center;"></i></a>

<a href="https://www.youtube.com/"><i class="fa fa-youtube-play fa-2x col-xs-0 col-sm-2 col-md-2"  style="text-align:center;"></i></a>

<a href="https://plus.google.com/"><i class="fa fa-google-plus-square fa-2x col-xs-0 col-sm-2 col-md-2"  style="text-align:center;"></i></a>

```

What my icons look on a "small" screen:

[![enter image description here](https://i.stack.imgur.com/mcrMz.png)](https://i.stack.imgur.com/mcrMz.png)