0

I have a two-column layout made up of several separate elements with a variable height:

enter image description here

So far, so good. Now I want to collapse this layout at a certain screen width into a single column ordered by the elements' letters:
A
B
C
D
E
F

My solution is to use a CSS-columns layout on desktop, ordering the elements A-C-E-B-D-F, defining a 2-column-layout and forcing a break after E. Then I switch to flexbox on the smaller viewport and use the order property to display them in the intended order of A-B-C-D-E-F.
This is not optimal, since the structure of the HTML source will not match the logical order of the content.

Is there a more elegant solution I'm currently missing?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
René Roth
  • 1,979
  • 1
  • 18
  • 25
  • related: https://stackoverflow.com/questions/44377343/css-only-masonry-layout – Temani Afif Jul 17 '21 at 19:33
  • Ironically, looking through the related questions and those marked as duplicates, it seems my columns-layout solution is the only one working without JS, predefined heights and css beta features. I'll probably use it in combination with `aria-flowto`. – René Roth Jul 18 '21 at 07:54

0 Answers0