Bootstrap hidden-sm-down not working

Question

I am using Boostrap 3. Why the <div> with hidden-sm-down is still visible when I resize the page on my laptop? I want to hide those two images on small devices in order to have a different menu.

<div class="row">                 
    <div class="col-md-7 left">
        <ul class="row">
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down wave">
        <img src="img/ondina.png" />
    </div>
    <div class="col-md-3 right">
        <ul class="row">
            <li class="col-md-6">
                <a href="">Text</a>
            </li>
            <li  class="col-md-6">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down right-border">
        <img src="img/menu-right.png"  />
    </div>
</div>

Answer 1

Actually, hidden-sm-down won't work with Bootstrap 4 and above
(there use d-none instead of hidden-sm-down, and use d-sm-none instead of hidden-sm-up, see also understanding-details).

With BS4, display utility classes are completely changed. Use this format instead;

.d-{breakpoint}-{value}

More information ; https://getbootstrap.com/docs/4.0/utilities/display/

Answer 2

As Jaqen said, if you use Bootrstrap 3, you should use hidden-sm instead.

Also, if you want to hide the image on small screen, you have to add hidden-xs.

Here's a JsFiddle : DEMO