Javascript 如何使用显示：RWD上的块

我在桌面上有以下设计

当分辨率是移动的但不起作用时，我想在display:block中显示这些div

.header{
宽度：100%；
高度：700px；
保证金：自动；
背景图片：url（“../ta3.jpg”）；
背景大小：70%；
背景重复：无重复；
背景位置：右上角；
}
.页眉.页眉中心{
宽度：90%；
身高：100%；
保证金：自动；
位置：相对位置；
显示器：flex；
}
.收割台.收割台\中间.收割台\第一排{
宽度：100%；
高度：自动；
文本对齐：居中；
位置：绝对位置；
左：0；
右：0；
顶部：150px；
}
.header.header__中心。header__总线剑-row.总线剑{
字体大小：45px；
颜色：#3535；
字号：800；
}
.header.header\u center.skins行{
宽度：100%；
高度：200px；
top:264px；
左边距：自动；
右边距：自动；
显示器：flex；
边缘顶部：320px；
}
.header.header\uuu center.skins行参考包裹{
宽度：130px；
高度：200px；
位置：绝对位置；
边框：1px实心#27d0d3；
光标：指针；
}
.header.header\uuu center.skins行.ref wrap:hover>.reflink徽标{
转变：规模（120%）；
过渡：.4s；
}
.header.header\u center.skins行。ref wrap:before{
内容：''；
位置：绝对位置；
背景：#fff；
宽度：100%；
身高：100%；
不透明度：.7；
}
.header.header\uuu center.skins行。ref wrap.reflink徽标{
最大宽度：100%；
保证金：自动；
左：0；
右：0；
顶部：-30px；
位置：绝对位置；
}
.header.header\u center.skins行.ref wrap.reflink信息{
宽度：100%；
高度：100px；
位置：绝对位置；
底部：0；
文本对齐：居中；
}
.header.header\u center.skins行.ref wrap.reflink info.reflink\u链接a{
文字装饰：无；
字体大小：400；
颜色：252525；
}
.header.header\uuu center.skins行.ref wrap.reflink info.reflink\uu代码{
填充顶部：7px；
}
.header.header\uuu center.skins行.ref wrap.reflink info.reflink\uu price{
填充顶部：7px；
}
@媒体屏幕和屏幕（最大宽度：400px）{
.标题{
宽度：100%；
高度：900px；
保证金：自动；
背景图片：url（“../ta3.jpg”）；
背景大小：140%；
背景重复：无重复；
背景位置：右上角；
}
.header.header\u center.skins行{
边缘顶部：20px；
}
}

这是我的梦想吗


Kod:xgleba
免费0.5英镑$



Kod:xgleba
免费0.5英镑$



Kod:xgleba
免费0.5英镑$



Kod:xgleba
免费0.5英镑$



Kod:xgleba
免费0.5英镑$

对于选择器，我没有得到一些样式和不必要的高特异性，但我想你的问题是关于在狭窄的视口上堆叠

.skins行

-元素，对吗？您还必须更改父对象（

.header.header\uu center

）的显示属性才能看到效果，因为它被设置为使用flex box

.header{
宽度：100%；
高度：700px；
保证金：自动；
背景图片：url（“../ta3.jpg”）；
背景大小：70%；
背景重复：无重复；
背景位置：右上角；
}
.页眉.页眉中心{
宽度：90%；
身高：100%；
保证金：自动；
位置：相对位置；
显示器：flex；
}
.收割台.收割台\中间.收割台\第一排{
宽度：100%；
高度：自动；
文本对齐：居中；
位置：绝对位置；
左：0；
右：0；
顶部：150px；
}
.header.header__中心。header__总线剑-row.总线剑{
字体大小：45px；
颜色：#3535；
字号：800；
}
.header.header\u center.skins行{
宽度：100%；
高度：200px；
top:264px；
左边距：自动；
右边距：自动；
显示器：flex；
边缘顶部：320px；
}
.header.header\uuu center.skins行参考包裹{
宽度：130px；
高度：200px；
位置：绝对位置；
边框：1px实心#27d0d3；
光标：指针；
}
.header.header\uuu center.skins行.ref wrap:hover>.reflink徽标{
转变：规模（120%）；
过渡：.4s；
}
.header.header\u center.skins行。ref wrap:before{
内容：''；
位置：绝对位置；
背景：#fff；
宽度：100%；
身高：100%；
不透明度：.7；
}
.header.header\uuu center.skins行。ref wrap.reflink徽标{
最大宽度：100%；
保证金：自动；
左：0；
右：0；
顶部：-30px；
位置：绝对位置；
}
.header.header\u center.skins行.ref wrap.reflink信息{
宽度：100%；
高度：100px；
位置：绝对位置；
底部：0；
文本对齐：居中；
}
.header.header\u center.skins行.ref wrap.reflink info.reflink\u链接a{
文字装饰：无；
字体大小：400；
颜色：252525；
}
.header.header\uuu center.skins行.ref wrap.reflink info.reflink\uu代码{
填充顶部：7px；
}
.header.header\uuu center.skins行.ref wrap.reflink info.reflink\uu price{
填充顶部：7px；
}
@媒体屏幕和屏幕（最大宽度：400px）{
.标题{
宽度：100%；
高度：900px；
保证金：自动；
背景图片：url（“../ta3.jpg”）；
背景大小：140%；
背景重复：无重复；
背景位置：右上角；
}
.header.header\u center.skins行{
边缘顶部：20px；
}
}
/*增加*/
@媒体屏幕和屏幕（最大宽度：400