Responsive Columns or Grids....

Permalink
I've noticed that in a lot of responsive themes, if I have three or more columns and then narrow the width of my browser, it goes from three columns to one column. Why doesn't it go from three columns to two columns to one column instead?

I have a bunch of blocks/buttons I'd like to present in columns and rows (a grid). Is there a way the grid can be responsive and size from three columns to two columns and then to one instead of going straight from three columns to one column?

Hork
View Replies:
JohntheFish replied on at Permalink Reply
JohntheFish
There is the responsive approach of @Growthcurve's masonry theme. He has a good online demo where you can see it rearrange with the browser size.

http://www.concrete5.org/marketplace/themes/flexcrete-masonry/...

@Dojo's folia slider may also be adaptable to be responsive across a grid layout (I have never tried to do that with it)

http://www.concrete5.org/marketplace/addons/dojo-folio-slider/...

You could also look for a responsive table within a single big column. I have never used it, but there is a jQuery responsive table plugin. You would need to search it out on google and see if it does what you want, then code it into a block or area of a theme.
Hork replied on at Permalink Reply
Hork
I did a search and found this, which acts the way I want it to.

http://www.responsivegridsystem.com/...

I'm too much of a novice to do anything with it.

I'm using the Bootstrap theme. Going to look into it a little more to see if it can do what I need.

Thanks for your responses, JohntheFish.
JohntheFish replied on at Permalink Reply
JohntheFish
If you play about resizing the responsive grid front page, the columns just get smaller rather than re-arrange into fewer columns. Is that what you really wanted?
Hork replied on at Permalink Reply
Hork
You're right!

No, that's not what I want.

I have a Bootstrap theme and a Foundation Theme... wonder if either of them can do this? Will continue to look at their documentation.
joeyblach replied on at Permalink Reply
Realise you may have moved on already but to do what you want all you need to do is define 3 media queries in your css each with different sizes as appropriate. Bootstrap is an ok start, but I personally find it is best to start from the base up and most people who use bootstrap change very little of bootstrap resulting in many websites looking the same... Anyway the link below should help:

http://www.onextrapixel.com/2012/04/23/responsive-web-design-layout...

Also if you are using less check out my grid project onhttp://laughingwithu.github.com/flawless-semantics-grid/...