Responsive grid with variable column layout

[kbilyak04]

Is there any way to adapt the number of columns depending on the screen width using a "traditional" grid layout?I'm using one of the many responsive fluid grid systems out there - for example the grid from zurb foundation (using 12 columns).Say I make three columns that span over the page:\[code\]<div class="row"> <div class="four columns"></div> <div class="four columns"></div> <div class="four columns"></div></div>\[/code\]Say that at a certain breakpoint (screen width) I would like to show my content in four columns instead of three.\[code\]<div class="row"> <div class="three columns"></div> <div class="three columns"></div> <div class="three columns"></div> <div class="three columns"></div></div>\[/code\]Maybe even more for even larger screen, and maybe only two columns for a little smaller.The problem is - using this grid (or others with similar markup), that I have to change the markup - and to my knowledge, I cannot adapt the number of columns using css mediaqueries.Is there any way to easily change the number of columns? Maybe using javascript?I'm sure there must already be a grid system that is customizable in this way, but I haven't found any.