Problem with responsive-sm for ng-repeat

1

Hi,
I have an array of objects in my controllor and I would like to show that in my view by using ng-repeat in 4 items per row for a tablet and in 1 item per row for mobile device.
I am using responsive-sm and it works for less than 4 items in my array. But my array is dynamic with 20 items and now all of them are placed in one row. I would like 4 rows and 5 columns.
Is there any way to create some breakpoints every 4 items?

        <div class="row responsive-sm">
        <div class="col" ng-repeat="item in items">
            <div class="demo">
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>
            </div>
        </div>

[EDIT] Here is a demo http://codepen.io/leoshtika/pen/emyevg

Thank you

2

Could you put a demo together in a codepen?

3

Mike please find a CODEPEN here. http://codepen.io/leoshtika/pen/emyevg
In this example I have 6 cards, but I could have 16 or 60.
In small devices it is OK but in larger devices (tablets) it doesn’t change row.
It would be nice to have a lot of rows with 3 or 4 cards per row.
Thank you.

4

So something like this?

Note, I added a fixed width on to the columns, and added flex-wrap to the row.

1 Like
5

Yes.
I don’t know why I didn’t see this.
Thank you very much Mike.