bootstrap 5：两列布局，文本应围绕图像流动

Question

我只是找不到解决方案。我想实现连续两列；左栏中有一个图像（md-3 或 lg-4），右栏中有一个长文本（md-9 或 lg-8）。

当我位于图像的末尾时，我希望文本以整个网格宽度（12）围绕图像流动。如图所示：()

    <div class="row">
            <div class="col-md-3 col-lg-4">IMAGE</div>
            <div class="col-md-9 col-lg-8">TEXT</div>
        </div>

我正在使用 Bootstrap 5。我不想添加任何额外的 html，但只需插入正确的 Bootstrap 5 类即可。

到目前为止，我已经尝试过 float-start / float-end、order-lg-1 / order lg-2 但没有成功。甚至是行吗？它必须是d-flex吗？不幸的是我没有这方面的经验。

Answer 1

解决方案：

1. 删除行

2. 删除第二个 div 的网格宽度

3. 将 float-none 添加到第二个 div

4. 将浮动开始添加到第一个 div

       <div class="float-start col-md-3 col-lg-4">IMAGE</div>
       <div class="float-none">TEXT</div>