Warum funktioniert meine Medienabfrage nicht mit Flexbox?

Question

Ich baue zuerst mobile und benutze flexbox. Ich habe drei Spalten ..

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

Am Handy möchte ich die versteckte Klasse versteckt.

Obwohl ich bin mobil zuerst die erste CSS Lese Gestaltung ist:

#container { 
      width: 87%; 
      margin: 0 auto; 
      display: flex; 
      flex-direction: column; 
     } 

Dann habe ich eine Medien Abfrage verwenden, um die .hidden zu verstecken.

@media screen and (max-width: 360px) { 
      .hidden { 
       display: none; 
      } 
     } 

Dann gehe ich in Desktop-Design und Stil der drei divs wie so

@media screen and (min-width: 600px) { 
#container { 
       width: 93%; 
       margin: 0 auto; 
       display: flex; 
       flex-direction: row; 
      } 

} 

Warum ist es, dass die letzten zwei divs mit der Klasse von hidden nicht auf mobile verstecken?

Fiddle

Answer 1

Ihr mobiles Gerät ist wahrscheinlich breiter als 360 Pixel. Finde heraus, was die richtige Breite ist und passe dein Stylesheet entsprechend an.

Wenn möglich, sollten Sie auch eine allgemeinere Medienabfrage in Erwägung ziehen (z. B.), um zu vermeiden, dass Sie die Breite in Ihren Stylesheets fest codieren müssen.