Bootstrap 3.1 visible-xs and visible-sm not working together

Question

I have a div that I want to show on sm and xs devices, it looks like this:

Answer 1

Bootstraps works with classes that go from the specified width-class and up. For example if you put col-sm-4, this simply forces it to be 4 columns wide for the sm-width and wider.

In your case a simple class="col-xs-4 hidden-md hidden-lg" should be enough to get your desired solution.

The reason your first solution didn't work, is that you specified visible-xs before visible-sm. Which forces the sm class onto it, making it invisible on the xs-width. As this is specified in the stock bootstrap css.

Edit: For those who are using Bootstrap 4 this could be achieved with just class="col-4 d-md-none"