Different Div Alignments on Different Resolution

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

I've put a codepen to help with what I'm trying to do. For starters, I didn't hardcode this site, I did it in Webflow which is some interactive interface to build a website, then I extracted the HTML code. Of course it's not ideal... but anyway, here I am.

The dropdowns under 'Africa' stack when the screen resolution changes, and the dropdowns under 'Asia' don't (the ones I'm trying to code to stack @ different res). The former are input in by Webflow's 'dropdown' widget, but I find them very burdensome and want to just hardcode mine in manually. I've tried a while to try to mimic the code for the dropdowns under Africa (something to do with the @media bit?) but for some reason, no matter how hard I try, I can't get them to stack. Can someone offer a solution?

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

Solution

I have tweaked your original pen and created my own. What I changed:

I gave the dropdowns a container with a class of dropdown-container that can control how they are organized as the screen size changes.
I added a display: flex CSS property to the dropdown-container class. And I set flex-flow: column to tell the container to order these elements in a single column.
When the screen goes below 750px, I change the flex-flow property on the container to row so that the dropdowns are then organized in a single row.

If you don't know much about flexbox, this is the cheat sheet I always fall back on.