能否用Bootstrap 4实现指定响应式布局及md屏幕列偏移？

当然可以轻松实现这个布局！Bootstrap 4的移动优先栅格系统正好能满足你不同屏幕尺寸下的列排布需求，下面是具体的实现方案：

核心思路 #

根据你的需求，我们针对不同断点设置对应的列宽类：

• 大屏设备（≥992px）：3个等宽列，每个列占用栅格系统的4份（12/3=4），使用col-lg-4类
• 中屏设备（≥768px且<992px）：前两个列各占50%宽度（等宽），用col-md-6；第三列单独占满整行，用col-md-12
• 小屏设备（<768px）：3个等宽列，每个列占用4份，使用col-sm-4类（如果需要超小屏<576px也生效，换成col-4即可）

完整代码示例 #

<div class="container">
  <div class="row">
    <!-- 第一列 -->
    <div class="col-lg-4 col-md-6 col-sm-4 bg-light p-3 border">111</div>
    <!-- 第二列 -->
    <div class="col-lg-4 col-md-6 col-sm-4 bg-light p-3 border">222</div>
    <!-- 第三列 -->
    <div class="col-lg-4 col-md-12 col-sm-4 bg-light p-3 border">333</div>
  </div>
</div>

代码说明 #

• container和row是Bootstrap栅格的基础结构，负责提供正确的内边距和列排列规则
• bg-light p-3 border是辅助样式，用来让列的边界更清晰，实际开发中可以根据需求移除
• Bootstrap栅格遵循移动优先原则：小屏幕的类会被大屏幕的类覆盖，比如在大屏下col-lg-4会替代col-md-6和col-sm-4的效果，自动切换为三列等宽布局

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