Bootstrap `.hidden-xs " ne pas cacher div

Je suis en train de créer un site, qui permet de masquer une longue section pour les utilisateurs sur un petit écran à l'aide de Bootstrap est .hidden-xs Pour le tester, je suis en utilisant google Chrome mobile de l'émulateur, le paramètre "iPhone 5" (assez petit). Lorsque j'actualise la page, cependant, il ne permet pas de cacher la div. Suis-je à l'aide de la classe de mal?

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/todo.css">
<title>TODO</title>
</head>
<body>
<div class="container-fluid">
<header>
</header>
<div id="left">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div class="main" class="hidden-xs">
</div>
</div>
</body>
</html>

CSS

/* CSS Document */
body {
margin: 0;
}
header {
height: 10em;
width: 100%;
border-bottom: 1px solid #000000;
}
#left {
float: left;
height: 80%;
max-width: 100%;
width: 20%;
border-right: 1px solid black;
overflow: scroll;
}
#main {
float: left;
width: 80%;
height: 100%;
}
.test {
height: 10em;
background-color: #eeeeee;
width: 100%
}
.test:hover {
background-color: #dddddd;
}

ici est un JSFiddle démontrant mon code: https://jsfiddle.net/James_Parsons/jwqdbn61/

MODIFIER

Apparemment un iPhone 5 n'est pas assez petit. Si j'utilise les deux .hidden-xs et .hidden-sm qu'il sera caché sur tous les petits appareils?

double possible de l'iPhone 5 CSS media query

OriginalL'auteur an earwig | 2015-03-26