如何只在移动设备上显示折叠按钮和文本，在桌面上显示未折叠的内容？

我可以使用这个例子，只显示文本的一部分。通过点击其中一个按钮，将显示文本的其余部分。这对移动来说很好。

<p>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</p>
<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

但我如何使它显示所有的文本在桌面和隐藏按钮？要隐藏按钮,我可以添加：

<p class="mobile-show-more">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</p>

并添加CSS类：

.mobile-show-more {
    display: none;
}

我正在考虑使用一个媒体查询，比如：

@仅媒体屏幕和（最大宽度:600px){

但我不确定这个类应该是什么样子的。当然，我可以使用'.mobile-show-more'类来处理桌面上的文本，但这样我就会有两个相同的文本。