différentes Div Alignements sur une résolution différente

Question

http://codepen.io/jiselllla/pen/MJzRjV

J'ai mis un codepen pour aider à ce que je suis en train de faire. Pour commencer, je n'ai pas codé ce site en dur, je l'ai fait dans Webflow qui est une interface interactive pour construire un site web, puis j'ai extrait le code HTML. Bien sûr, ce n'est pas idéal ... mais de toute façon, je suis là. Les listes déroulantes sous la pile 'Africa' s'affichent lorsque la résolution d'écran change, et les listes déroulantes sous 'Asia' ne le font pas (celles que j'essaye de coder pour empiler @ res différentes). Les premiers sont saisis dans le widget 'dropdown' de Webflow, mais je les trouve très lourds et je veux juste coder manuellement le mien. J'ai essayé pendant un moment d'imiter le code pour les listes déroulantes sous Africa (quelque chose à voir avec le peu de @media?) Mais pour une raison quelconque, peu importe combien j'essaie, je n'arrive pas à les empiler. Quelqu'un peut-il offrir une solution?

.dropdown{ 
    position: relative; 
    display: inline-block; 
    font-family: Bitter, serif; 
    font-size: 18px; 
} 

Answer 1

J'ai modifié votre stylo d'origine et créé my own. Ce que je changé:

• je lui ai donné les listes déroulantes un récipient avec une classe de dropdown-container qui peuvent contrôler la façon dont ils sont organisés comme les changements de taille de l'écran. J'ai ajouté une propriété CSS display: flex à la classe dropdown-container. Et j'ai mis flex-flow: column pour dire au conteneur de commander ces éléments dans une seule colonne. Lorsque l'écran passe en dessous de 750px, je change la propriété flex-flow sur le conteneur en row afin que les listes déroulantes soient ensuite organisées en une seule ligne.

Si vous ne savez pas beaucoup sur FlexBox, this is the cheat sheet I always fall back on.