Resize browser to see how the four cells stack to adapt to changes in width.
The difference between this demo and the jqcResponsiveLayoutManager Basics Demo is that this demo sets a fixed width for the number of columns each cell should span, but a variable number of columns for the row in the different width intervals. The basics demo does the opposite: A fixed number of columns the row spans, but a variable number of columns spanned by the cells in each width interval. The net effect is the same. Compare the sources to see the difference in configuration.
The row (
jqc-row) default behaviour is to take up 100% of the browser window width until a max of 1200 pixels.
After that it will center the row in the browser window. At less than 600 pixels in width, all cells are stacked vertically.
At 600 - 1199 pixels in width, cells are stacked 2 by 2. At 1200+ in width, cells are floating horizontally.