无需使用Bootstrap实现移动端隐藏横幅、桌面端显示横幅

没问题，用原生CSS的媒体查询就能轻松实现这个需求，完全不用依赖Bootstrap框架。下面是具体的实现方案：

步骤1：给横幅图片添加自定义类名 #

先给你的图片标签加上一个专属类名，方便我们用CSS精准控制它的显示状态：

<img src="https://www.toko.lk/wp-content/uploads/2019/05/meta@toko2.lk_.jpg" alt="Online Shopping Sri Lanka" class="resetImage desktop-only-banner" style="max-height:100%;width:480px" />

步骤2：编写CSS控制显示与隐藏 #

通过原生CSS的媒体查询，我们可以针对不同屏幕尺寸设置不同的显示规则：

/* 默认在移动端隐藏横幅 */
.desktop-only-banner {
    display: none;
}

/* 当屏幕宽度≥768px（桌面端视图）时显示横幅 */
@media (min-width: 768px) {
    .desktop-only-banner {
        display: block;
    }
}

补充说明 #

• 这里采用移动端优先的思路：先默认隐藏横幅，再在桌面端尺寸下让它显示，符合现代响应式设计的最佳实践。
• 你可以根据自己的设计需求调整媒体查询的断点值（比如把768px改成992px），适配不同的桌面端屏幕宽度。
• 原有的resetImage类和行内样式可以保留，不会和我们新增的样式冲突。

内容的提问来源于stack exchange，提问作者Chathuranga Lakmal