div с классом начальной загрузки "d-sm-none" отображается на экране любого размера

Question

Я написал эту разметку:

<nav class="navbar navbar-expand-lg">
<a class="navbar-brand overflow-hidden pr-3" href="@Url.Action("Index","Home")">
    <!--<img src="~/Content/Theme/images/logo-dark.png" alt="" />-->
    <img src="~/Content/Theme/images/Velosi/applusLogo.jpg" style="height:50px" alt="" />
</a>

<div class="d-sm-none">
    <h3>THIS SHOULD BE ONLY DISPLAYED ON MOBILE PHONES</h3>
</div>

<button class="navbar-toggler" type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <div class="hamburger hamburger--emphatic">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
</button>

Я ожидаю

<div class="d-sm-none">
    <h3>THIS SHOULD BE ONLY DISPLAYED ON MOBILE PHONES</h3>
</div>

должно отображаться только на сотовых телефонах, а не за его пределами, но оно отображается на экране любого размера. Почему это так?