При введении команд hidden и visible работает некорректно.

Здравствуйте. Кто-нибудь может подсказать? Все шло прекрасно, уже весь сайт практически готов, и тут на ровном месте потеряна уже куча времени - все перепробовала, пересмотрела - не понимаю почему у меня сайт ломается. Все получалось как надо до момента, когда нужно было сделать невидимым поле Поиск на мобильных устройствах и ввести строку поиск сразу под меню на мобильных устройствах. Ввожу hidden-xs для раздела Поиск - на маленьком экране пропадает вообще весь левый стоблик (который внизу на маленьком экране). Т.е. не только раздел Поиск, но и Войти, Новости, Рейтинг. Попробовала добавить hidden-xs к остальным блокам по одному - на всех работает корректно. Пропадает только тот блок, к которому это подписано. А при вводе к Поиску, пропадает сразу весь левый раздел. Хотя команду одну и ту же пишу.

<div class="panel panel-info hidden-xs">
<div class="panel-heading"><div class="sidebar-header">Поиск</div></div>
<div class="panel-body">
<form role="search">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запрос">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><span class="glyphicon glyphicon-search"
aria-hidden="true"></span></button>
</div>
</div>
</form>
</div>
</div>

И еще больше вторая проблема - при добавлении строки поиска сразу под меню в мобильных устройствах вообще мистика начинается. Если добавить просто форму поиска, то пропадает опять же весь левый раздел (на любом размере экрана). А вот если добавить еще class="visible-xs", то на маленьком экране видно только правый раздел, на среднем экране видно только левый раздел, а на большом экране вообще ничего не видно - только  header и footer, между ними белый экран.

Получается, как-будто он не закрывает команду visible, что она относится только к строке Поиска, а на все дальнейшие разделы ее распространяет так коряво (что весь вообще правый блок видно только на размере xs). Хотя это не объясняет почему еще и левый блок видно только на среднем экране.

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

<div class="wraper">
<div class="container">
<div class="row">
<div class="col-lg-9 col-lg-push-3">
<form role="search" class="visible-xs">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запрос">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><span class="glyphicon glyphicon-search"
aria-hidden="true"></span></button>
</div>
</div>
</form>
<h2>Новые фильмы</h2>