Основные правила разметки 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>

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