Okay, on this test page:
http://www.gordw.com/test/finish-carpenter.html
That row that is there is pretty well great for the entire rest of the sites thumbs.

But in this one row I have this going on
http://i68.tinypic.com/2e2f52p.jpg
So I found out 6 containers with flex on the column doesn't cut it for this one.
Tried 3 columns that didn't work it stacks the paragraph under the image.

It's just too persnickety for me to get it to flow right, got any ideas?

I think I got it.
http://www.gordw.com/test/flexTEXT.zip
I can't think of another way to do that.

I ended up back to using 3 sub-grids and applied flex to them.
The trick was to set the paragraph to inline.
Who knows... now the images work without containers.

I'll leave that zip up for a few days if anyone wants to check it out.

That is a hot mess of subgrids, compared to....

In a container, place the image and the paragraph/text. Assign the container a max width (necessary) so that all container can fit into the width at least, and give the pics a width to set their size. Flex the container to align the image and paragraph. Then Flex the column to justify/position the sets of containers. Works in my Edge, IE11, and Firefox. Flex the Flex. Flex the column to wrap, and the responsive part is done.

I'm thinking the subs give you a bit better responsive and control with less, since you can set them with the grid. Here is that zip with both, and with the container width you get into stacks unless you set those at breakpoints.
http://www.gordw.com/test/flexTEXT.zip
Unless I'm missing something in your explanation?

What I did with the subgrids and flex was set them up like this:
http://www.gordw.com/test/finish-carpenter.html
So there is mid breakpoints at tablets then to phones kind of thing plus using only a couple of classes without the multiple flex. Kind of interesting how you can go at this with different ideas isn't it.

Flex controls just make it overall easier to position in my opinion, and leaves open greater flexibility for spacing that you are not happening to use in your webpage at the present. For instance, one can use the space-between, space-around, start and end justification options. That is hard to do with any set of columns. If you are already using flex controls for a column, might as well use it for the the row as well. At some breakpoint, you will have to change the spans for each column anyway. Flex is just a simpler interface. One won't need a max container width, unless you have the space, and would like a space-around or space-between justification. In fact, I overlooked the width% option for containers. I think using this software, people get tunnel visioned, or at least I do, into not exploring various width%'s and changing floats and using non-static position controls. So, one can give the containers a 25% width and contain their size that way as well.

Its really a matter of personal preference. When you look at the design, use the method that best matches the way you visualize the wireframe. For instance, in your file you just posting, one can replicate the the first row with some minor changes to the lower row.