Html d-none d-sm-block在移动或切换设备工具栏上不工作

我试图让一张卡在手机上不可见，但是当我最小化页面时，“d-none d-sm-block”可以正常工作，但当我在手机上或chrome的切换设备工具栏上实际部署和查看它时，它就不起作用了。出于某种原因，“d-none d-lg-block”无论是最小化还是以移动格式查看，都可以完美地工作。关于sm为什么不起作用有什么想法吗？我也尝试过其他浏览器，同样的。我的代码如下

<div class="card d-none d-sm-block">
  <div class="card-body">
        <h4 class="card-title" align="center">Example</h4>
    </div>
</div>

例子

xs类别只涵盖540px或更小的屏幕宽度，而且现在许多手机的屏幕宽度都大于540px，因此它们属于

sm

类别。看

---

因此，要针对桌面和更大的屏幕，最好使用

md-

，即使用

d-none d-md-block

d-md实际上具有相同的结果。出于某种原因，它只有d-lg和更高版本可以工作。我正在做的这个作业特别要求我隐藏所有xs屏幕，讲师将在切换设备工具栏中检查它。