Html 创建一个子列，只在小屏幕上显示

我只想在小屏幕大小（col-sm-9）下显示子列。在中等屏幕大小（col-md-2）下它不会显示。有什么方法可以做到这一点吗

我试过下面的方法，但失败了

HTML代码：

 <div class="row">
    <div class="col-sm-9 col-md-2">
        Level 1: .col-sm-9
        <div class="row">
            <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
    </div>
 </div>

   body {
        margin: 0;
        padding: 0;
    }
    .col-xs-4 {
        border: 1px solid red;
    }
    .col-xs-8 {
        border: 1px solid red;
    }
    .col-sm-9 {
        border: 1px solid red;
    }
    .col-sm-6 {
        border: 1px solid red;
    }
    .col-md-2 {
        border: 1px solid red;
    }

---

我认为您可以使用添加类“.visible xs”和“hidden xs”（将“xs”更改为您想要的大小，如“lg”、“sm”…）

级别1:.col-sm-9
二级：.col-xs-8.col-sm-6
二级：.col-xs-4.col-sm-6

您可以尝试使用

媒体查询

，例如，如果您想让某些div在手机等小屏幕上不可见，可以使用以下代码

@media all and (max-width: 658px) {

.col-sm9 { display: none; }

}

或者，如果你想把它隐藏在更大的设备上，比如平板电脑和笔记本电脑，你可以试试这个

@media all and (max-width: 992px) {

.col-sm-9 { display: none; }

}

要更好地了解

媒体查询

，请查看下面的链接

---

问题有点不清楚，您是否试图在小屏幕上显示某些div？然后消失在大屏幕中？如果我按照第一种方式，然后在后面（最小宽度：658 px）。col-md-2不显示。

@media all and (max-width: 992px) {

.col-sm-9 { display: none; }

}