Основные правила разметки Bootstrap 3 - скрываем блоки

Для мобильных устройств, нужно использовать эти классы для отображения и скрытия содержимого с устройства с помощью медиа запросов.

Необходимо использовать эти классы, а не создавать свои. Используйте их, чтобы облегчить себе работу и получать преимущества инструментов Bootstrap.

• .hidden-*-up классы скрыть элемент, когда область просмотра на данном устройстве шире. Например, .hidden-md-up скрывает элемент на средних, больших и сверхбольших экранах.
• .hidden-*-down  классы скрыть элемент, когда область просмотра на данном устройстве меньше. Например,  .hidden-md-down скрывает элемент на очень малых, малых и средних устройствах.
• Можно комбинировать один .hidden-*-up класс с .hidden-*-down. класс, чтобы показать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показан элемент только на средних и больших экранах. Использование нескольких .hidden-*-up классов или нескольких .hidden-*-down это занятия является излишним и бессмысленным.

Для удобства верстки можно использовать маленикй код, разместив его на сайте.

<div class="bootstrap-informer">
    <span class="d-block d-sm-none">XS</span>
    <span class="d-none d-sm-block d-md-none">SM</span>
    <span class="d-none d-md-block d-lg-none">MD</span>
    <span class="d-none d-lg-block d-xl-none">LG</span>
    <span class="d-none d-xl-block">XL</span>
</div>

<style>
.bootstrap-informer {
    width: 50px;
    height: 50px;
    position: fixed;
    background: #de9452;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
}
</style>

Данный код выведет префикс используемого класса для текущего расширения.