想要的效果是随窗口大小变化时右侧的内容也变化，里面的小div以1,2,4个元素显示，窗口变化时候为什么中间出来了一个上面3个元素下面一个元素的情况？
<head>
<meta charset='utf-8'>
<meta http-equiv="content-type" content="text/html;">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>first test</title>
<style>
.box{
width: 100%;
height: 100%;
}
.b01{
width: 20%;
height: 200px;
background-color: blue;
float: left;
}
.bigBox{
width: 75%;
height: 200px;
margin-left: 15px;
background-color:#c0c0c0;
float: left;
}
.sbox {
width: 22%;
height: 40px;
margin: 10px;
float: left;
}
@media screen and (min-width: 0px) {
.sbox{
width:95%;
height: 30px;
}
}
@media screen and (min-width: 768px) {
.sbox{
width:95%;
height:30px;
}
}
@media screen and (min-width: 992px) {
.sbox{
width:47%;
height: 70px;
}
}
@media screen and (min-width: 1200px){
.sbox{
width: 23%;
height: 180px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="b01"></div>
<div class="bigBox">
<div class="sbox" style="background-color: red;"></div>
<div class="sbox" style="background-color: green;"></div>
<div class="sbox" style="background-color: blue;"></div>
<div class="sbox" style="background-color: pink;"></div>
</div>
</div>
</body>
</html>
