Okay @Bohemond , here’s an example that doesn’t fully work, but is getting closer. Unfortunately, I don’t know why it doesn’t work, or even how I got this much to work. Anyone with some top-level CSS skills want to chime in?
Also adding in @eli from whom I got the structure/approach in his excellent post.
A few things to point out:
- Designer has boxes in Red, Green, Blue order (left to right).
- Preview @ ≥534px has same Red, Green, Blue order.
- Preview @ <534px has new Red, Blue, Green order.
- This order remains as you reduce page width until 303px.
- Preview @ 302px drops Blue to new 2nd row but is centred.
- Preview @ ≤301px shows correct vertical alignment as all items are in 1 column.