скрытый класс bootstrap не работает?

Question

Вот мой HTML

<div class="container-fluid"> 
    <div class="row"> 
     <div class="header"> 
      <a href="#" class="col-xs-3 col-xs-offset-1 logo"></a> 
      <div class="col-xs-6 col-xs-offset-1 nav hidden-sm-down "></div> 
     </div> 
    </div> 
</div> 

Вот мой CSS

.header{ 
    width: 100%; 
    background-image: url("san_fran.jpg"); 
    background-size: cover; 
} 

.top-header{ 
    width: 100%; 
} 
.logo{ 
    background: url("logo-cinetik.png") center center no-repeat; 
    height: 130px; 
    min-width: 400px; 
} 

.nav{ 
    background-color: $test-color; 
    height: 100px; 
} 

DIV тег имеет класс скрытых см-вниз. Он должен быть скрыт, когда мое окно меньше определенной точки, не так ли?

Вот результат

Красный DIV должен быть скрыт! Как я могу это сделать?

Answer 1

Это устройства на основе классов.

Дополнительные маленькие устройства Телефоны (< 768px) (Class names : .visible-xs-block, hidden-xs)

Малые устройства таблетки (≥768px) (Class names : .visible-sm-block, hidden-sm)

Средние устройства Desktops (≥992px) (Class names : .visible-md-block, hidden-md)

Больших устройств Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Обратится по ссылке для получения дополнительного http://getbootstrap.com/css/#responsive-utilities