Html CSS网格在移动设备上隐藏文本（移动设备优先）

我正在构建一个导航栏并使用CSS网格

以下是html：

<nav class="nav">
    <div class="menu">
        <div class="header">
            HEADER
        </div>
    </div>
    <span class="space"></span>
    <div class="breadcrumb">
        <div class="bcrumb">
            Breadcrumbs
        </div>
    </div>
</nav>
<div class="content">

</div>

我已经为面包屑添加了标题文本和文本位置，只有在大屏幕上才会出现

我通过添加以下内容使其生效：

.header, .bcrumb{ 
    visibility:hidden;
}

然后将其设置为在媒体查询中可见

但肯定有更好的方法可以做到这一点吗？

---

这是一个具有相同代码的CSS。

这是用于移动屏幕的CSS

@media all and (max-width: 767px) {
  .header, .bcrumb { 
    visibility: hidden;
  }
}

---

你在使用什么Css框架？@JohannesPiontkowitz-none。我正在使用这个，然后使用媒体查询将是实现这一点的最佳方式。这个答案并不好，因为它是移动首页。在阅读了这个答案后，我编辑了我的标题。但这只适用于767px以下的宽屏幕。不适用于更大的屏幕。您可以使用您想要的大小而不是767。宽度小于768px时，我们应该改变设计，而不是在宽度大于768px时更改样式。然后使用可见性：隐藏而不需要媒体查询。它将隐藏这两个元素。并使用可见性：在查询中对较大屏幕可见，而您已经对较大屏幕可见。显示属性是另一个选项。显示：无和显示：块

@media all and (max-width: 767px) {
  .header, .bcrumb { 
    visibility: hidden;
  }
}