My code can be found at codepen.io at the link below.
Full size webpage includes an outline, which disappears when reduced to 640px and the background colors change to shades of green.
display: grid; was used instead of flex. The boxes of color were defined by height in pixels, but the width used a percentage so they would expand as needed. This caused a problem when reducing the box size, as the type would have to be re-centered accordingly.
Now that I have a working <html> framework, I can experiment with flex-box then decide which works best for this type of layout... (later).
Under 640px width:
I had to do a little research because my code just wasn't working with the grid design. My problem was that I was trying to align rows defined by a "row" class, but creating rows is done automatically when columns are defined. My computer is much like a teenager. If you tell it to do something it already does, then it stops! Once that error was figured out and the row class was deleted, my grid fell into place.