title: Missing visible-** and hidden-** in Bootstrap v4
body: <p>In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example, </p>
  
  <p>I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.</p>
  
  <p>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.</p>
  
  <p>Here's an example in v3...</p>
  
  <p><a href="http://jsbin.com/tosebayode/edit?html,css,output" rel="noreferrer">http://jsbin.com/tosebayode/edit?html,css,output</a></p>
  
  <p>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.</p>
  
  <p>Here's a similar example in v4...</p>
  
  <p><a href="http://jsbin.com/sagowihowa/edit?html,css,output" rel="noreferrer">http://jsbin.com/sagowihowa/edit?html,css,output</a></p>
  
  <p>So I've gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.</p>
  
  <p>From...</p>
  
  <pre><code>&lt;div class="clearfix visible-xs-block visible-sm-block"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>to...</p>
  
  <pre><code>&lt;div class="clearfix hidden-sm-up"&gt;&lt;/div&gt;
  &lt;div class="clearfix hidden-md-up hidden-xs-down"&gt;&lt;/div&gt;
  &lt;div class="clearfix hidden-md-down"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Is there a better way of doing this in v4 that I have overlooked?</p>