v4 - Add responsive clearfix utility classes #17355
Description
With the demise of the responsive utility classes like visible-xs-block, visible-sm-block, etc.; I think we need some additional utility classes (clearfix-xs, clearfix-sm, etc) for grid column clearing purposes.
So we can write something like this:
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="clearfix-sm"></div> <!-- Show only for sm -->
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="clearfix-md"></div> <!-- Show only for md -->
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="clearfix-lg"></div> <!-- Show only for lg -->
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
</div>instead of this:
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="clearfix hidden-xs-down hidden-md-up"></div> <!-- Show only for sm -->
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="clearfix hidden-sm-down hidden-lg-up"></div> <!-- Show only for md -->
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
<div class="clearfix hidden-md-down hidden-xl-up"></div> <!-- Show only for lg -->
<div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
</div>(I actually wanted to create a pull request about this, but SASS code is currently far beyond my comprehension ability.)