Using Bootstrap 3, how do I utilise media queries to transition from stacked linked items into horizontal columns?

The Khan Academy website has a near perfect example of what I mean.

• khanacademy.com
• Click on ‘Subjects’ drop down
• In desktop/laptop view this now shows five columns
• Making the page smaller the five columns turn into four. Carry on and the columns turn into stacked linked items (first in a landscape table with two columns and then into a vertical list of stacked linked items).

I would like to find out the following:

How do I code a transition from the vertical stacked linked items to the landscape two-column table of stacked linked items?

How do I then code a transition from the stacked linked items to horizontal columns (as seen in desktop view)?

I know how to create linked items and how to create columns. And I understand that you can use media queries in stylesheets and link to them. However, I’m not sure what to put inside the curly brackets of the media queries that will allow transition from stacked items to horizontal columns.

So far, I have created a draft web page with six columns (using col-md-2) these are very similar to the subject lists in khan academy. When I make the page smaller these columns just collapse into one long list. I understand this is not the best approach – I plan on starting mobile-first. If I can work out how to move from the stacked lists to the six columns then the rest of my design should be straight-forward.

Also, I should say I’ve tried to look at Khan Academy source code but it’s not easy to interpret for me (I've read they use Pure's responsive grid). And I’m quite new to coding and web design.

Any help would be greatly appreciated. Thanks for taking the time to read my question.