Css 使用Boostrap栅格更改样式。

我正在尝试学习如何使用引导网格，但在找出如何在不同大小的元素上使用不同的样式时遇到了困难。我想根据屏幕的大小改变div的位置和颜色渐变的方向。我做了3个代码笔来帮助形象化

<div class="container-fluid">
    <div class='col-md-3 col-xs-12'>
        <div id="header">Header</div>
        <div id="sidebar">Sidebar</div>
    </div>
    <div class='col-md-9 col-xs-12'>
       <div id="main">Main</div> </div>

</div>

这就是它在超大屏幕上的外观。

---

但是当我尝试组合代码时，它不起作用

要获得预期结果，请使用下面提到的媒体查询

代码笔-

---

它不起作用，因为无论屏幕大小如何，元素都有类，并且最后应用的样式占主导地位。要根据屏幕大小实际应用样式，您需要使用媒体查询，而不是依赖引导。事实上，Bootstrap在内部使用媒体查询来更改您正在使用的屏幕大小类的样式。

这是第三个代码笔，非常感谢！我正在为别人制作我的第一个专业网站，这也是我第一次为手机屏幕制作东西。手机屏幕的最大宽度是多少？检查您的网页，您可以看到移动设备的列表，您可以找到所有设备屏幕大小。这可能是一个愚蠢的问题，但媒体查询是否是普通CSS的一个特性？我已经看过很多教程了，但我还没学会。是的。他们可能有点难以处理。

.col-md-3 #header{
   background:linear-gradient(to right, yellow, green);
    height:25vh;
}
.col-md-3 #sidebar{
   background:linear-gradient(to right, yellow, green);
    height:75vh;
}
.col-md-9 #main {
    background: linear-gradient(to right, green , blue);
    height:100vh;
}

.col-xs-12 #header{
   background:linear-gradient( red, yellow);
    height:25vh;
}
.col-xs-12 #sidebar{
   background:linear-gradient(yellow, green);
    height:25vh;
}
.col-xs-12 #main {
    background: linear-gradient(green , blue);
    height:50vh;
}

 #header{
   background:linear-gradient( red, yellow);
    height:25vh;
}
 #sidebar{
   background:linear-gradient(yellow, green);
    height:25vh;
}
 #main {
    background: linear-gradient(green , blue);
    height:50vh;
}


 /* Small Devices, Tablets */
    @media only screen and (max-width : 320px) {

        #header{
   background:linear-gradient( red, yellow);
    height:25vh;
}
#sidebar{
   background:linear-gradient(yellow, green);
    height:25vh;
}
#main {
    background: linear-gradient(green , blue);
    height:50vh;
}


    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

        #header{
   background:linear-gradient(to right, yellow, green);
    height:25vh;
}
#sidebar{
   background:linear-gradient(to right, yellow, green);
    height:75vh;
}
#main {
    background: linear-gradient(to right, green , blue);
    height:100vh;
}


    }