Bootstrap 4 hidden-X-(down/up) class not working

Question

I'm using Bootstrap v4.0 beta and I have checked this migration doc

https://v4-alpha.getbootstrap.com/migration/#responsive-utilities

but there's no way to make the hidden-X-up or hidden-X-down work. Here is an example of my code:

    <div class="container">
      <div class="row">
        <div class="col-md-3 hidden-md-down">
          <p class="title">Join us</p>
          <p class="subtitle">Just click on the button below</p>
          <p class="link"><a href="#" class="outstanding-link">the button below</a></p>
        </div>
      </div>
    </div>

it should be visible with 3 columns in a medium devices (greather than 720px) but hidden in less than a medium device.

Here is an snipet

https://jsfiddle.net/n7oo7dLk/

thanks in advance.

Answer 1

The hidden-* classes have been removed in Bootstrap 4 Beta. Now the d-* display classes can be used for responsive visibility...

For example, hidden-md-down would now be: d-none d-lg-block

https://www.codeply.com/go/VsOfRxuPfo

Also see this answer and the full list of Bootstrap 4 beta changes.