Responsive Grid in Drupal 7 Views with 5 columns

Question

I'm trying to build a responsive Views grid in Drupal 7 and bootstrap3 sub-theme. On Views I am using the Responsive Grid module as format.

In my Views format settings I configured the grid to 5 columns.

In order to support 5 columns in bootstrap I made an addition to my less file, according to this article: https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap in the answer given by lightswitch05.

My HTML markup created by Views would look like this

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
    <div class="col-xs-6 col-sm-4 col-md-2-4">...</div>
</div>

It all works just fine for the 5 column grid in Medium devices Desktops (≥992px) using the col-md-2-4 class.

The problem is for Small devices Tablets (≥768px) using col-sm-4 and Extra small devices Phones (<768px) using col-xs-6.

Since class "row" is already wrapping 5 elements when trying to display 3 or 2 grid columns there is either 2 or 1 element out of the grid row.

So the question is: Is it possible to create a responsive grid with 5 column grid for col-md, a 3 column grid for col-sm and 2 column grid for col-xs, in Drupal 7 Views ?

Answer 1

I think i figured it out.

If I set columns to 1 then I can use any responsive number of bootstrap columns according to the width.