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

  • tmk71yhu
    Likes 0

    Problem Description

    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.

  • tmk71yhu
    Likes 0

    I should aslo say that I came to your website after watching your youtube video on linked list items. And my name’s Jack.

  • Sonar Systems admin
    Likes 0

    The mobile content isn’t a transition between them but is always there but hidden on bigger screens. So only show them on smaller screens and only show the drop down on bigger screens.

  • Sonar Systems admin
    Likes 0

    Hi,

     

    I have created a tutorial to explain this process https://www.youtube.com/watch?v=z7JliDhUA_U 

     

    Kind regards

    Frahaan Hussain

Login to reply