这里是新手，但我确实在这里看了很多论坛，但似乎找不到解决办法。
我试着做三个，对三个不同维度的屏幕都有反应。 较小的一个（col-md）和较大的一个（col-lg）起作用，但中间的一个（col-md）不起作用
我不知道我漏掉了什么，但是中间的那个不起作用，如果有什么解决办法，请告诉我。 在html文件中，
<div class="style col-lg-4 col-md-6 col-sd-12">
<div class="boxtitle">
Chicken
</div>
<div>
<p>
SOME TEXT HERE</p>
</div>
</div>
<div class="style col-lg-4 col-md-6 col-sd-12">
<div class="boxtitle">
</div>
<div>
<p>
SOME TEXT HERE
</p>
</div>
</div>
<div class="style col-lg-4 col-md-12 col-sd-12">
<div class="boxtitle">
Sushi
</div>
<div>
<p>
SOME TEXT HERE
</p>
</div>
<div>
在CSS文件中，
@media (max-width: 767px) {
.col-sd-12 {
width: 100%;
float: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12 {
float: left;
}
.col-md-6 {
width: 50%;
}
.col-md-12 {
width: 100%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
width: 33%;
float: left;
}
}
在您的代码示例中有som语法错误:第二个块中有unclosed.BoxTitle，最后一个块中有unclosed.Style。 如果这些错误被修复，代码将正常工作，不会出现任何问题
null
.style:nth-child(1) {
background-color: #bbb;
}
.style:nth-child(2) {
background-color: #666;
}
.style:nth-child(3) {
background-color: #999;
}
@media (max-width: 767px) {
.col-sd-12 {
width: 100%;
float: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6, .col-md-12 {
float: left;
}
.col-md-6 {
width: 50%;
}
.col-md-12 {
width: 100%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
width: 33%;
float: left;
}
}<div class="style col-lg-4 col-md-6 col-sd-12">
<div class="boxtitle">
Chicken
</div>
<div>
<p>
SOME TEXT HERE
</p>
</div>
</div>
<div class="style col-lg-4 col-md-6 col-sd-12">
<div class="boxtitle">
Pizza
</div>
<div>
<p>
SOME TEXT HERE
</p>
</div>
</div>
<div class="style col-lg-4 col-md-12 col-sd-12">
<div class="boxtitle">
Sushi
</div>
<div>
<p>
SOME TEXT HERE
</p>
</div>
</div>
您键入的是col-sd-12，我想您的意思是col-sm-12？
