Различных Div Трасса на различном разрешении

Question

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

Я поставил codepen, чтобы помочь с тем, что я пытаюсь сделать. Для начала я не сделал этого жесткого кода, я сделал это в Webflow, который представляет собой некоторый интерактивный интерфейс для создания веб-сайта, а затем я извлек HTML-код. Конечно, это не идеально ... но в любом случае, вот и я.

Выпадающие списки под стэком «Африка» при изменении разрешения экрана, а выпадающие списки под «Азией» не являются (те, которые я пытаюсь скомпоновать в стек @ разных res). Первые вводятся в виде виджета Webflow «dropdown», но я считаю их очень обременительными и хочу просто вручную записать вручную. Я пробовал некоторое время, чтобы попытаться имитировать код для выпадающих списков в Африке (что-то связанное с биткой @media?), Но по какой-то причине, как бы я ни старался, я не могу заставить их складываться. Может ли кто-нибудь предложить решение?

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

Answer 1

Я подправил свое оригинальное перо и создал my own. Что изменилось:

• Я дал Dropdowns контейнер с классом dropdown-container, которые могут контролировать, как они организованы, как изменения размера экрана.

• Я добавил свойство display: flex CSS к классу dropdown-container. И я установил flex-flow: column, чтобы сообщить контейнеру о заказе этих элементов в одном столбце.

• Когда экран проходит ниже 750 пикселей, я меняю свойство flex-flow на контейнер на row, чтобы затем выпадающие списки были организованы в одну строку.

Если вы плохо знаете о flexbox, this is the cheat sheet I always fall back on.