SO @media question

by Stephen Lujan

HTML

<div id="container">
   <div id="one">hi</div>
   <div id="two" class="hidden">hi</div>
   <div id="three" class="hidden">hi</div>
</div>

CSS

div {
  border: 1px solid red;
}   
#container {
  width: 87%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border
}
        
@media screen and (max-width: 360px) {
  .hidden {
    display: none;
  }
}
        
@media screen and (min-width: 600px) {
  #container {
    width: 93%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
  }

}