Давайте еще раз взглянем на нашу работу, которую мы делали ранее (демо). Если смотреть в большом разрешении, то все отлично, но вот есть смотреть в очень маленьком разрешении (менее 768px), то наша картинка с животным смещается на второй ряд.
Но давайте подумаем, а зачем нам эта картинка вообще? При большом разрешении она выполняла декоративную роль и вполне гармонично смотрелась в правом углу, но вот во второй строке она совсем не уместна и Bootstrap нам поможет ее визуально скрыть (по факту она будет в коде, будет отдаваться поисковикам, будет кушать трафик пользователей).
Для решения этой задачи нам помогут как раз отзывчивые классы, с которыми более детально можно ознакомиться здесь, а я пока привиду только табличку.
Давайте применим теперь это на практике
<div class="col-lg-6 col-sm-7">
<img src="img/animals.jpg" alt="" class="hidden-xs">
</div> Мы добавили к нашей картинке класс hidden-xs, который, если взглянуть на таблицу выше, скрывает элемент при очень маленькой сетке, а во всех остальных случаях не скрывает. Так мы можем скрывать все неугодные глазу элементы.