如何在Bootstrap不同屏幕尺寸下控制元素显示与布局

你使用的是Bootstrap栅格与响应式工具类体系，现有配置缺少对应断点的栅格宽度类、元素显隐控制类，补充调整规则如下：

各断点适配修改逻辑 #

• XL尺寸（≥1200px，<1400px）：你现有d-none d-xl-block d-xxl-none的配置已符合需求，无需调整。
• MD尺寸（≥768px，<1200px）：
  1. 图片元素添加类d-md-none d-xl-block，即可在MD区间隐藏图片，XL尺寸恢复显示
  2. 列元素添加类col-md-12，MD下每列宽度占100%，自动排列为2行
• XS尺寸（<576px）：
  列元素添加类col-6，XS下每列宽度占50%，自动排列为2列

修改后完整代码示例 #

<!-- 行容器保持不变 -->
<div class="row">
    <!-- 列容器替换原有col-sm-3，新增对应断点类 -->
    <div class="col-6 col-md-12 col-xl d-none d-xl-block d-xxl-none">
        <!-- 图片元素添加显隐类 -->
        <img src="你的图片地址" class="d-md-none d-xl-block" alt="示例图">
        <!-- 其他内容保持不变 -->
    </div>
    <!-- 第二个列元素也同步修改列类即可 -->
    <div class="col-6 col-md-12 col-xl">
        <!-- 文字等其他内容 -->
    </div>
</div>

如果你不需要在SM尺寸（576px~767px）做特殊适配，以上配置会默认继承XS的2列布局，如有特殊需求可自行补充col-sm-*类调整。

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