CSS media queries: order of layout of <div> sections

Hi,

I was just reading about the skeleton CSS media queries framework for different layout sizes here:
http://designshack.net/articles/css/build-a-responsive-mobile-friendly-web-page-with-skeleton/

I understand the coding. However, I was reading this post:
http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design

and there are some examples of a responsive layout like the about.com page:
http://www.about.com/#!/editors-picks/

My question is how does one code the layout to determine what goes first and second and third and so forth?

For instance, in that link of the about page, there are several photos and they are probably in some <div> tags. But when viewed in a vertical layout on my mobile phone the photos are shown in a certain order. Is the order determine by the order of the code?

Just learning the responsive layout media queries.

Thanks<><
Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
I prefer boostrap myself http://getbootstrap.com/ and even http://foundation.zurb.com/

The heart of these things is the grid and media queries.   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

When a set of css classes (or id's) are in a media query, those classes are turned on or off based on any number of ways the media query is set up.  In this case, it is based on the width of the viewport.

When you are designing your page, you have to plan it out in 3 to 5 different possibilities.  You may have one element hidden on a small screen or maybe it stacks.  You just have to do a bit of planning.    

The way it works in brief is the divs are floated to left and set on a 12 column grid.  Notice the classes are numbered.  If you want 2 columns you could use any combination of classes that add up to 12.  As the viewport shrinks so does the container until it reaches the parameters of the media query you have set, then the new css takes over that is set in the query.

I have a nice simple write up about bootstrap responsive on another question http:Q_28406542.html#a39982826
0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
Ok, thanks. Scott. I'm taking a look at bootstrap. Looks like it has good docs which is what I need. Going to study it. =) Father God bless you<><!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.