jqcResponsiveLayoutManager - Variable Row Column Counts - Demo

Show source

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.

Cell 1
Cell 2
Cell 3
Cell 4