HTML\CSS → Twitter Bootstrap 3: спрятать блок на маленьких экранах

Задача: прятать блок div на маленьких экранах (расширение ниже <768px). Например, нам нужно спрятать большую картинку в мобильной версии сайта.

В предыдущей версии Twitter Bootstrap 2 для этого использовались классы .hidden-phone,  .hidden-tablet и т.д. Но они устарели и в новой версии бутстрапа не доступны.

Для скрытия элементов при различных расширениях нужно использовать следующие классы:

Мобильные устройства (<768px) — .visible-xs, .hidden-xs

Планшеты (768px — 992px) — .visible-sm, .hidden-sm

Десктопы (992px — 1200px) — .visible-md, .hidden-md

Большие экраны (>1200px) — .visible-lg, .hidden-lg

Подробнее о классах в документации: http://getbootstrap.com/css/#responsive-utilities

Пример сокрытия блока с картинкой на устройствах с маленьким экраном:

<div class='hidden-xs hidden-sm'>
    <div class='big-image>...</div>
</div>
  • ychelovek

    Спасибо!

  • Антон

    Спасибо, помогло.

  • Иван

    Спасибо!

  • Час голову ломал, а оказывается все так просто))

  • Спасибо!

  • Николай

    Подскажите, будет ли в таком случае есть интернет трафик? то есть загружать картинку с телефона потребуется?

  • Александр

    Изображение загружается, просто display:none.
    Проверил

  • Ринис

    Спасибо !!!

  • Evgeny

    Thanks!

  • Камила

    Здраствуйте как напишите один пример пожалуйста

  • Пример сокрытия блока с картинкой приведет в конце заметки. Родительскому блоку просто добавляются классы hidden-xs hidden-sm

  • Камила

    спс можно ли размеры картины разные были у пк и мобильном

  • fat boy

    @media only screen and (max-device-width: 768px) {
    .parallax,.button{
    display: none;
    }

    /*(parallax, button) выступают блоками которые нада скрыть для мобильных на пк они видны*/