Need dynamic items to display in column order, not row order

Design help General
1

I have a few collections of 12 items that are shown in 2 columns of 6 each. The flex box layout for these items is set to horizontal, so it’s logical that the order of display is in rows. But if I change the flex box setting to vertical, I get a single column of 12 items. If I adjust the width of the collection list item to 50%, it leaves the right half of the container blank, rather than flowing the items into the open space. I need the items to display in two columns, with the first column containing the first six items (with list ordered top to bottom), and the second containing the last six (top to bottom).

So the question is, how to I reorient the order so the list runs top to bottom in columns rather than left to right in rows?

The site page with the lists is here: http://kbc-website.webflow.io/media-documents

Here is my site Read-Only: https://preview.webflow.com/preview/kbc-website?utm_source=kbc-website&preview=ee631eac59bebf7054145c21d50f3a6b

2

Please add screenshot of the result you want - Its hard like this to understand the problem. For vertical layout to get “Wrap children” effect you should set some height for the wrapper.

The container will need to have a height in order that the items will start wrapping and creating new columns, and items will stretch taller to fill each column completely. mozilla - Mastering Wrapping of Flex Items

image
image758×422 5.76 KB

3

That worked! Thank you!