In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,
I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.
As an example if I wanted to display rows of product photos, 4 per row on larger screen sizes, 3 on smaller screens, then 2 on very small screens. The product photos might be different heights so I need the clearfix to ensure the row breaks properly.
Here’s an example in v3…
Now that v4 has done away with these classes, and replaced them with the visible/hidden-**-up/down classes I seem to have to do the same thing with multiple DIVs instead.
Here’s a similar example in v4…
So I’ve gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.
From…
<div class="clearfix visible-xs-block visible-sm-block"></div>
to…
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>
Is there a better way of doing this in v4 that I have overlooked?
