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.
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