Как в бутстрап настраивать видимость блока при переходе на другое разрешение?

В Bootstrap есть несколько способов настраивать видимость блоков при переходе на другое разрешение. Рассмотрим каждый из них подробно:

1. Использование классов видимости:
Bootstrap предоставляет классы видимости, которые можно применять к элементам для управления их видимостью на различных размерах экрана. Это классы .visible-* и .hidden-*.
Например, чтобы сделать блок видимым только на маленьких экранах, вы можете добавить класс .visible-sm-* к элементу. А чтобы сделать блок скрытым только на средних экранах, примените класс .hidden-md-*.
Пример:

<div class="visible-sm-block">Этот блок будет видим только на маленьких экранах</div>
<div class="hidden-md">Этот блок будет скрыт только на средних экранах</div>

2. Использование класса .d-*:
В Bootstrap 4 был добавлен новый класс .d-* (где * - xs, sm, md, lg, xl), который позволяет управлять отображением блока на различных экранах. Этот класс разделяется на несколько частей, которые указывают, когда блок должен быть отображен или скрыт. Например, класс .d-none указывает, что блок должен быть скрыт на всех экранах, а класс .d-lg-block указывает, что блок должен быть виден только на больших экранах.
Пример:

<div class="d-none d-sm-block">Этот блок будет скрыт на всех экранах, кроме маленьких</div>
<div class="d-lg-block">Этот блок будет видим только на больших экранах</div>

3. Использование медиа-запросов:
Если вам необходима более точная настройка видимости блока в зависимости от разрешения экрана, вы можете использовать медиа-запросы. Медиа-запрос позволяет применять CSS стили к элементам в зависимости от различных параметров, таких как ширина экрана, ориентация устройства и другие.
Пример:

<div class="my-block">Этот блок будет видим только на экранах шириной меньше 768px</div>

@media (max-width: 767px) {
    .my-block {
        display: block;
    }
}
@media (min-width: 768px) {
    .my-block {
        display: none;
    }
}

В этом примере блок с классом .my-block будет видимым только на экранах шириной меньше 768px. При переходе на экраны большей ширины, блок будет скрыт.

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