When the screen is resized to be smaller, I would like the margins on the right and left of the grid to shrink until it hits the breakpoint, then I would like the 3 boxes to wrap so that the “Preview” box drops to the second row first, followed by the “Create Text Message” at the second breakpoint. (Sorry I don’t have a second mockup available to show this at the moment.)
I was thinking of using a flexbox for the top horizontal bar, as well as the navigational bar. Then use a 12 column grid in the main portion of the page. However, I thought I may be better off just using a singular grid on the entire page. I’m somewhat new to front end development so forgive me if there is an obvious solution I am missing.