I'm having some trouble with the code below when in the small viewport size (768-992px). The other viewports work as expected.
At the small size I would expect two rows of four columns each; however, I am getting three rows of 4, 2, and 2 columns.
Removing the line <div class="clearfix visible-lg-md-block"></div> solves the problem at the small viewport size, but its removal creates causes an uneven display at the medium and large viewports.
Why am I getting three rows at the small size and what can I do so I only get two?
Thank you so much!
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lavender;">
Column 1<br>
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lavenderblush;">Column 2</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightcyan;">Column 3</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightgray;">Column 4</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:beige;">Column 5</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightyellow;">Column 6</div>
<div class="clearfix visible-lg-md-block"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:plum;">Column 7</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:thistle;">Column 8</div>
</div>
</div>
Did you try using class="clearfix visible-md-block visible-lg-block" instead?
Your current code gets:
Your structure is expected to produce 3 rows on -xs size!
You must change all col-xs-4 to col-xs-3 to get 2 rows