I have a list view containing product cards. If I am on medium device or larger, the list view needs to display 5 columns/cards per row. Otherwise it should show a single product per row on a smaller device. The issue is I cannot figure out how to do this with the bootstrap grid as it is an odd number. These are the classes of the ListView I am working with: listview-stylingless lv-col-md-2 If I set the column weight for a medium device to 2 as above, I get 6 products per row. If I set it to 3 I get 4 products per row. What other options do I have to control this? I have tested using a template grid as well, but I don’t see how to make this responsive. I would prefer to use a list view.
asked
Alan Stark
1 answers
4
IOP using bootstrap rows and columns is not the right approach in your case. It would be much more appropriate to use flexbox with media queires. See the following example: https://codepen.io/estelle/pen/brDpB