I have a form - in desktop mode it has a 1200 px row with a pair of 6 span columns.
row-col-1 has a form container with a two-col sub-grid, sg-col-1 and sg-col-2 each contain roughly half the form content.
rem: see double-column.jpg
double-column.jpg

row-col-2 contains a container with a rounded border and some basic call to action text suggesting fill out the form to the left or give us a call at toll free.

Somewhere around 1100 px the form starts getting scrunched. I can buy some time by reducing the min width of the controls but the bottom line is that I need to have the right-hand sg-col-2 move under the sg-col-1
rem: see single-column.jpg
single-column.jpg

and at some point not far to the left of that breakpoint have row-col-2 flow under the sub-grid contents in row-col-1.

I've tried a couple thoughts but I'm not getting anything like what I want to see - I suspect I've taken a wrong path here, constructed the containing elements the wrong way or something? I would certainly appreciate some suggestions at this point.

Without seeing a link try float