如何正确使用Bootstrap网格偏移实现指定响应式布局？

我有一个采用Bootstrap网格行模式的页面，每行包含一段文本和一张图片，布局要求如下：

• 大屏设备（lg及以上）：
  • 偶数行：文本占据第3至8列，图片占据第9至11列
  • 奇数行：图片占据第2至4列，文本占据第5至10列
• 小屏设备：每张图片需位于对应文本下方

目前已通过空列实现该布局，但想用Bootstrap的偏移类替代空列，尝试多种组合后只能让奇数行或偶数行其中一种布局正确，无法同时满足。现有实现代码如下：

<div class="container my-4">
    <div class="row align-items-center justify-content-center">
        <div class="col-lg-1 order-3 order-lg-1">&nbsp;</div>
        <div class="col-lg-6 order-1 order-lg-2"><p>Paragraph text.</p></div>
        <div class="col-lg-3 order-2 order-lg-3"><img src='...'></div>
    </div>
    <div class="row align-items-center justify-content-center">
        <div class="col-lg-3 order-2 order-lg-1"><img src='...'></div>
        <div class="col-lg-6 order-1 order-lg-2"><p>Paragraph text.</p></div>
        <div class="col-lg-1 order-3 order-lg-3">&nbsp;</div>
    </div>
    ...
</div>

使用Bootstrap的offset-lg-*偏移类替代空列的核心是精准计算偏移量，结合order-*类维持小屏的显示顺序，以下是正确的实现方式：

核心逻辑 #

Bootstrap网格系统基于12列布局，偏移量offset-lg-n表示在当前元素前预留n列空白，以此控制元素的起始位置：

• 奇数行：图片需从第2列开始，给图片容器加offset-lg-1（预留1列空白），占3列；文本紧跟图片，无需额外偏移，占6列
• 偶数行：文本需从第3列开始，给文本容器加offset-lg-2（预留2列空白），占6列；图片紧跟文本，无需额外偏移，占3列
• 小屏设备统一用order-1（文本）和order-2（图片）保证文本在上、图片在下的顺序

完整代码实现 #

<div class="container my-4">
    <!-- 奇数行：图片左，文本右 -->
    <div class="row align-items-center">
        <div class="col-lg-3 offset-lg-1 order-2 order-lg-1">
            <img src='...' class="img-fluid">
        </div>
        <div class="col-lg-6 order-1 order-lg-2">
            <p>Paragraph text for odd row.</p>
        </div>
    </div>

    <!-- 偶数行：文本左，图片右 -->
    <div class="row align-items-center">
        <div class="col-lg-6 offset-lg-2 order-1 order-lg-1">
            <p>Paragraph text for even row.</p>
        </div>
        <div class="col-lg-3 order-2 order-lg-2">
            <img src='...' class="img-fluid">
        </div>
    </div>
    <!-- 更多行重复上述结构 -->
</div>

额外说明 #

• 移除了原代码中冗余的justify-content-center，偏移类已精准控制元素起始位置
• 添加img-fluid保证图片在响应式布局中自适应宽度
• 奇数行用order-lg-1确保大屏下图片排在文本前，order-1确保小屏下文本排在图片前；偶数行无需调整大屏order，代码顺序已符合要求

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