

I'm writing something that's intentionally a bit weird, formatting-wise. Could I get help making it make sense for screen readers?
So, for reasons, I have a group of four main divs of text that I need to display side-by-side, all contained within a larger div, but the first div that I want page viewers to read is not the leftmost div. (Please ignore the color choices- those are just so I have something visual to look at to make sure the divs are where I want them to be.) I currently have the containing divs set up as grids.
Is there any way to get a screen reader to prioritize reading the four sub-divs in a given div in the order red, yellow, green, blue, then read the div that spans the whole layout, then read the next group of sub-divs in the same order? And would it be still applicable if I needed to temporarily "merge" two adjacent columns (see second image)?
I can handle the actual formatting into the grid, I think. Nesting divs where necessary could get the kind of hierarchy I could then plug into whatever html/css I need to use to prioritize the reading order I want. Or if there's some way to fill in a grid sort of "out of order" where the html has the red divs typed out first but the page layout still displays as seen in my screenshots. Is there anything that could do what I'm looking for, or should I just try and make a version of this text that's significantly less insane and offer it as an alternative to all this?
(I really hope I'm making sense, I don't really have anybody knowledgeable enough in html/css to bounce ideas off of, so it is entirely possible this was just a whole bunch of gobbledegook trying to figure out something that can't actually be done.)