PROJECTNo1

This layout is a complex layout that collapses from 2, 3 or 4 columns down to a series of 2 column layouts that stay as 2 column layouts right down to mobile sizes. Moving from Desktop down, the normal Foundation convention is to collapse or reduce multiple column layouts to single columns, all stacked on top of each other.

This works fine on small mobile screens where the sweet spot of a single column works and looks OK. However, when the columns collapse to 1 column from 4 or 3 columns (and also 2 to some degree), a single column display is now pretty wide and looks less than ideal. Also this type of column collapse uses up a lot of screen height.

So the solution created here, is to control any further collapse beyond 2 columns. The advantages are that it looks much better on mid sized devices and takes up less vertical space. The whole layout here can also be controlled, by adjusting the screen width trigger to adjust for different amounts of content.