新的可见类已添加到 Bootstrap

超小型设备手机（〈768 px）(Class names : .visible-xs-block, hidden-xs)
小型器械片剂（≥ 768 px）(Class names : .visible-sm-block, hidden-sm)
中型设备台式机（≥ 992 px）(Class names : .visible-md-block, hidden-md)
大型设备桌面（≥ 1200 px）(Class names : .visible-lg-block, hidden-lg)

更多信息：http://getbootstrap.com/css/#responsive-utilities

从v3.2.0起不再支持以下内容

超小型设备手机（〈768 px）(Class names : .visible-xs, hidden-xs)
小型设备平板电脑（≥ 768 px）(Class names : .visible-sm, hidden-sm)
中型设备桌面（≥ 992 px）(Class names : .visible-md, hidden-md)
大型设备桌面（≥ 1200 px）(Class names : .visible-lg, hidden-lg)

**更旧的 Bootstrap **

.hidden-phone, .hidden-tablet等不受支持/已过时。

更新日期：

在Bootstrap 4中，有两种类型的类：

• hidden-*-up，当检视区位于指定的中断点或更宽时，会隐藏项目。
• hidden-*-down，当检视区位于指定的中断点或更小时，会隐藏项目。

此外，新的xl windows 是为超过1200 px宽度的设备添加的。有关更多信息，请单击此处。

Bootstrap 4测试版答案：

• • d-block d-md-none用于在中型、大型和超大型**设备上隐藏。
• • d-none d-md-block用于隐藏在小型和超小型**设备上。

请注意，也可以通过将d-*-block替换为d-*-inline-block来内联
旧答案：Bootstrap 4 Alpha

• 可以使用类.hidden-*-up在给定大小和更大的设备上隐藏
• • .hidden-md-up用于在中型、大型和超大型**设备上隐藏。
• .hidden-*-down也是如此，它可以在给定大小和更小的设备上隐藏
• • .hidden-md-down用于在中型、小型和超小型**设备上隐藏
• visible-* 不再是bootstrap 4的选项
• 要仅在中型设备上显示，您可以组合使用这两个选项：
• • hidden-sm-down和hidden-xl-up**

有效大小为：

• xs适用于纵向模式手机（〈34em）
• sm适用于横向模式手机（≥ 34em）
• 片剂为md（≥ 48em）
• lg，适用于台式机（≥ 62em）
• xl适用于台式机（≥ 75em）

这是截至Bootstrap 4，alpha 5（2017年1月）。更多详情请点击此处：http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
在 Bootstrap 4.3.x上：https://getbootstrap.com/docs/4.3/utilities/display/

• • Bootstrap 4.x答案**

hidden-*类已从Bootstrap 4测试版中删除。
如果要在中等及以上级别上显示，请使用d-*类，例如：

<div class="d-none d-md-block">This will show in medium and up</div>

如果你想只显示在小和下面使用这个：

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

• • 屏幕大小和班级图表**

| 屏幕尺寸|类别|
| - -| - -|
| 全部隐藏|. d-无|
| 仅在xs上隐藏|. d-无. d-sm-块|
| 仅在sm上隐藏|. d-sm-无. d-md-块|
| 仅在MD上隐藏|. d-md-无. d-lg-块|
| 仅在lg上隐藏|. d-lg-无. d-xl-区块|
| 仅在xl上隐藏|. d-xl-无|
| 全部可见|. d-区块|
| 仅在xs上可见|. d-嵌段. d-sm-无|
| 仅在sm上可见|. d-none. d-sm-区块. d-md-none|
| 仅在MD上可见|. d-none. d-md-数据块. d-lg-none|
| 仅在lg上可见|. d-none. d-lg-区块. d-xl-none|
| 仅在xl上可见|. d-无. d-xl-区块|
您可以将一个.d-*-none类与一个.d-*-block类结合使用，使元素只在给定的屏幕尺寸间隔上显示（例如.d-none.d-md-block.d-xl-none只在中型和大型设备上显示元素）。
文件

您可以为任何模块输入这些模块类后缀，以便更好地控制模块的显示或隐藏位置。

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop

http://twitter.github.com/bootstrap/scaffolding.html滚动到底部

我在这里有几点需要澄清：
1)显示的列表（visible-phone、visible-tablet等）在Bootstrap 3中已弃用。新值为：

• 可见-xs-*
• 可见-sm-*
• 可见-md-*
• 可见-lg-*
• 隐藏-xs-*
• 隐藏-sm-*
• 隐藏-md-*
• 隐藏-lg-*

对于每一个，星号将转换为以下内容（下面我只显示visible-xs-*）：

• 可见xs块
• 可见-xs-内嵌
• 可见xs内嵌块

2)当你使用这些类时，你不会在前面加句号（正如上面答案中令人困惑的部分所示）。
例如：

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3)您可以使用visible-* 和hidden-*（例如，visible-xs和hidden-xs），但这些在Bootstrap 3.2.0中已被弃用。
有关更多详情和最新规格，请访问此处并搜索“visible”：http://getbootstrap.com/css/

对于Bootstrap 4.0测试版（我认为这将停留在最终版），有一个变化-请注意，隐藏类被删除。
请参见文档：https://getbootstrap.com/docs/4.0/utilities/display/
为了隐藏移动的上的内容并在更大的设备上显示，您必须使用以下类：

d-none d-sm-block

第一个类集显示所有设备上的none，第二个类集显示设备“sm”up（如果要在不同设备上显示，可以使用md、lg等代替sm）。
我建议在迁移之前阅读以下内容：
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

所有的hidden-*-up，hidden-*类对我来说都不起作用，所以我在visible-*之前添加了一个自制的hidden类（它适用于当前的引导版本）。如果你只需要在一个屏幕上显示div，而在所有其他屏幕上隐藏div，这是非常有用的。
CSS：

.hidden {display:none;}

于飞：

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>

附加CSS从“移动的”视图中的所有页面删除边栏：

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}

在Bootstrap 4.1中（运行代码段，因为我从Bootstrap文档中复制了整个表代码）：
第一个
https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements