I'm building a CMS using Zurb Foundation with a direct edit philosophy, eg as much as possible users should be able to drag to resize or move elements etc.
I prototyped it at desktop resolution, and this is the pattern I used for editing columns:
I think this illustration should be self-explanatory, but just in case, you can click to add new columns with the green icons, the blue icons can be dragged horizontally to adjust the widths, red to delete a column etc.
As I was prototyping at desktop res, I used Foundation's "large-n" CSS classes for the column widths.
Now I want to add Foundation's breakpoints to the CMS, (so you can, for example, set "medium-n" and "small-n" columns) and I'm having trouble visualising how this should work - at the moment if you had the column set above and change to a medium screen width, the columns are rendered as rows by Foundation (as expected):
Note that it shows the controls from the large column state - I left those in to show that I'm unsure what to do here.
So - the paradigm works fine if you're only ever dealing with "large", but it's hard for me to visualise how to handle the transition, for example the person using the CMS would probably now want to limit this particular four column layout to say, 2 or 3 columns for "medium", and 1 or 2 for "small", depending on the column content. They need to be free to make that decision.
What would be a better pattern, or a modification to my existing pattern, for allowing users to control the columns widths across different breakpoints?