OK - so as mentioned in the comment above, my assumption that "every column in the set sits in the same row" was misguided, as was my trying to use the ux paradigm that we're used to for resizing say, columns in a table.

Here's my working model going forward. Please note, I removed the UI elements for adding additional columns for clarity in this example. Also I made a weird decision while doing the mockup to distribute the "columns" equally vertically, now that I see it animated it looks a bit odd, so please ignore that.

I am going to replace the "drag the space between columns to resize" action with a numeric spinner defining the width on the grid.

Say you have a balanced column set (widths sum to 12, as per Foundation's grid), and you increase the size of one column, wrapping will occur:

Then, you switch to medium size, and as you have yet to define any column widths, they show a null state in the numeric spinners, and act as rows. You can then set each columns width for this breakpoint:

OK - so as mentioned in the comment above, my assumption that "every column in the set sits in the same row" was misguided, as was my trying to use the ux paradigm that we're used to for resizing say, columns in a table.

Here's my working model going forward. Please note, I removed the UI elements for adding additional columns for clarity in this example.

I am going to replace the "drag the space between columns to resize" action with a numeric spinner defining the width on the grid.

Say you have a balanced column set (widths sum to 12, as per Foundation's grid), and you increase the size of one column, wrapping will occur:

Then, you switch to medium size, and as you have yet to define any column widths, they show a null state in the numeric spinners, and act as rows. You can then set each columns width for this breakpoint: