CSS3 @media怎样控制div显示和隐藏

<div class="box box1">
<p>222</p>
</div>
<div class="box box2">
<h2>我收h2</h2>
</div>

.box{display:none;}
@media (max-width:676px){
.box1{
width:500px;
height:100px;
background:aqua;
display:block;
}
}
@media (min-width:676px) {
.box2{
width:200px;
height:200px;
background:tomato;
display:block;
}
}