Html dispay none不适用于转换

我使用媒体查询来隐藏iphone图像并显示桌面图像。。。。。 但他的iphone形象并没有出现。。。。 你能告诉我原因吗

desktopImage
iphoneImage
@介质（最大宽度：767px）{
#右滑块{
边框：1px纯红；
}
#右滑块{
显示：无！重要；
}
#右滑块{
显示：继承！重要；
}
.desktopContactImage{
显示：无！重要；
}
.iphoneContactImage{
显示：继承！重要；
边框：1px纯红；
}
}

需要研究一些可能有帮助的问题：

您没有在HTML标记之前声明doctype，例如

尝试编写媒体查询标签，如“@media screen and（最大宽度：767px）”

您有很多脚本标记浮动在HTML标记和HEAD标记之间-它们应该位于HEAD标记或BODY标记内

这是您在那里使用的一些JavaScript。说到让它为真正的用户提供服务，我建议缩小并压缩所有内容。

谢谢你，但它只有在我刷新之后才能工作……如何解决这个问题

<div class="desktopContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">desktopImage</div>

                        <div class="iphoneContactImage" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://intra.defie.co/images/cubes/demoImage.png">iphoneImage</div>


@media (max-width: 767px) {

#rightSlider{
    border: 1px solid red;
}

#rightSlider{
            display:none !important;
          }
#rightSlider{ 
            display:inherit !important;
          }

.desktopContactImage{

            display:none !important;
          }

.iphoneContactImage{
            display:inherit !important;
            border: 1px solid red;
          }



}