Fluid distribution of elements in a layout

Description

We would like to be able to more easily display smaller elements (e.g., Feature Content Blocks) distributed on a page in a fluid manner. When the viewport is larger, the elements would be distributed across several columns. When the viewport is smaller, they would be distributed down a single column. We would like the order of the elements to be determined by a single ordered list that is distributed in a natural reading order (left to right by row) when in multiple columns.

Currently the only way to implement this is using a 3-column layout. The problem is that if you are trying to maintain a particular order (e.g., alphabetical), if you arrange them as such in the 3-column layout, that order is not preserved when the viewport shrinks and a 1-column layout is used. Also, when you wish to later insert an elements into the layout, you have to manually reposition all the subsequent cards.

Current way things are displayed using a 3-column layout:

Wide viewport
A B C
D E F

Narrow viewport
A
D
B
E
C
F

Desired behavior:

Wide viewport
A B C
D E F

Narrow viewport
A
B
C
D
E
F

Examples

• https://it.med.wisc.edu/services/ Current WiscWeb implementation requiring 3-column layout that places all of the first columns content above the second column when viewport is small and it collapses into a single column.
• https://it.wisc.edu/services/ Desired behavior on a non-WiscWeb site, where the the order becomes first row followed by second row when the viewport is small and it collapses into a single column.