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:

<div class="col-xs-4 col-sm-4 visible-xs visible-sm">
   <a href="#">Item 1</a>
   <a href="#">Item 2</a>
   <a href="#">Item 3</a>
</div>

My bootstrap is loading from cdn without any customization.

This is supposed to show this div on xs and sm as stated on classes but the result is the sm class display:none !important is overriding the xs display:block !important when you go to xs size on the browser.

I tried to find out on bootstrap documentation but they only have a table that is not explaining how to use multiple visibility parameters on the same div.

Answer 1

If you want to show it at multiple sizes, don't use visible-* but instead hide the other sizes you don't want with hidden-*. In this case: hidden-md hidden-lg

Answer 2

When I face issues like this, I would simply prefer to use my own custom media query to manipulate the visibility of an element.

.someclass{
    display: none;
}

@media (max-width: 992px) {
   .someclass{
      display: normal!important;
   }
}

Or if you want to re-use this, then define a custom class such as:

.visible-tablet-mobile{
    display: none;
}

@media (max-width: 992px) {
   .visible-tablet-mobile{
        display: normal!important;
   }
}

and re-use it instead of giving your div two visibility classes at a time.

Answer 3

You must add one value from:

`.visible-*-block` for `display: block;`
`.visible-*-inline` for `display: inline;`
`.visible-*-inline-block` for `display: inline-block;`

In this case you will have something like this:

<div class="col-xs-4 col-sm-4 visible-xs-block visible-sm-block">

Keep up the good work :)