Skip to content

Ordering across rows in card-columns #17882

@taylordowns2000

Description

@taylordowns2000

Thanks @cvrebert , here you go!

Currently card-columns seems to only support ordering from top to bottom in column 1, then from top to bottom of column 2, etc.

I run a marketplace with 117 cards, ordered (in Angular) by number of 'upvotes'. My ng-repeat inside the card-columns div and it looks like:

1st 39th 72nd
2nd 40th 73rd
3rd 41st 74th
4th 42nd 75th

And so on.

Packery has support for ordering across across rows, which is very important for large lists because you often want your higher order items to be the first that are visible first for your users.

1st 2nd 3rd
4th 5th 6th

Obviously, this is how a list of col-md-4 divs would look, but it breaks up badly when the content of those divs have different heights. Is it possible to use card-columns but order in rows? (Maybe call it "bootstrap-rows"?)

I understand that technically, this is more challenging than top-down ordering because it doesn't require an algorithm to fill empty spaces when cards have different heights, but it seems like an important feature for Bootstrap-4.

Thanks in advance for your time, I'm loving b4 so far.

Taylor

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions