如何让媒体查询断点正常工作?

Question

我正在学习css定位，我有一个旋转的图像在桌面大小的另一个部分后面，但我想让它占据整个屏幕，并在视口变成平板电脑大小和移动设备时伸直。

问题是，在1020px的断点处，照片只会变直，但会保持在同一行，只是变得更小。它只在到达移动断点时占用自己的行。

我该如何解决这个问题?

这是我用来尝试得到这个结果的代码:

@media screen and (max-width: 1020px){
.title-img{
width: 60% !important; 
position:static !important;
transform: rotate(0) !important; 
}
}

我想要注意的是，我在文档的开头包含了标签，所以这不是它。另一个注意事项是，我正在使用Bootstrap网格系统的响应能力，这可能是问题，但我还没有弄清楚如何解决它。

Answer 1

@media screen and (max-width: 1020px){
.title-img-div, .title-text-div{
width: 100%;
}
.title-img{
width: 40% !important; 
position:static !important;
transform: rotate(0) !important; 
margin-left: 0; 
}
#title{
text-align: center;
}
} 

将图像和上面的文本包装在一个单独的div中，并在bootstrap类之外给它们另一个类，然后针对该类并将宽度更改为100%解决了这个问题。