So I have a 3 column layout, with content that does not work well with partial wrapping. That is to say:
+----------+----------+----------+
| THIS | IS | FINE |
+----------+----------+----------+
+----------+
| SO |
+----------+
| IS |
+----------+
| THIS |
+----------+
+----------------+---------------+
| THIS | IS |
+----------------+---------------+
| NOT |
+--------------------------------+
+----------------+---------------+
| NOR | IS |
+----------------+---------------+
| THIS |
+----------------+
I'm obviously trying to make it responsive... my issue is trying to persuade it to jump DIRECTLY from the 3 col to the 1 WITHOUT "passing through" 2. Now, I know how to do accomplish this with both nesting columns 1 & 2 into their own flexed container, as well as how to do so with @media breaks... but I'm HOPING someone knows of a secret sauce syntax shorthand, such that even when using a simple, flat structure like
<div id="block1">1</div>
<div id="block2">2</div>
<div id="block3">3</div>
I can achieve
1 2 3
directly to
1
2
3
without the need for the nesting/media break hijinks. To be clear: there's nothing wrong with either, and that's how I'll make it work if need be. But... it just FEELS LIKE there should be a way to handle this directly. Some combination of grow/shrink/basis... SOMETHING. If I'm just wishing on a star here, then hey, thanks for reading anyway, and I'm sorry to wasted your time.