html - 使用 Bootstrap 4 将文本环绕图像

Question

关于 Bootstrap 4:

考虑以下当前没有响应的 HTML/CSS 代码(当前没有 Bootstrap“col-”)。Lorem Ipsum 词将图像包装在右侧以及图像下方，这是向左浮动。

<img class="pr-3 pb-3 float-left" src="~/Images/some_image.png" />
        
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque nisl arcu, tempor a purus quis, congue rutrum libero. 
Suspendisse potenti. 
Aliquam nibh massa, tristique quis sodales at, fermentum at ex. 
Integer nec elementum nibh. 
Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. 
In euismod enim mi ut purus. Morbi ac quam lectus. 
</p>
<p>
Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. 
In pellentesque dui turpis ut quam. 
Praesent ullamcorper eros at lectus elementum tempus. 
Donec fermentum velit nec fermentum bibendum. 
In sit amet aliquam nulla, at vestibulum ligula. 
Interdum et malesuada fames ac ante ipsum primis in faucibus. 
Nam lacus purus, interdum nec blandit vel, lacinia ac ex.
</p>

我不确定在“md”断点处使用什么 Bootstrap 语法保持自动换行，然后在“sm”断点处转到图像上的“col-12”，并且文本上的“col-12”，将文本放在图像下方，代替当前自动换行。

谢谢。

Answer 1

我认为不可能响应式地将元素从 float 转换为 col。但是您可以响应式地显示和隐藏每一个

<img class="pr-3 pb-3 float-left d-none d-md-block" src="~/Images/some_image.png" />
<img class="pb-3 col-12 d-md-none" src="~/Images/some_image.png" />

.float-left 最初用 .d-none 隐藏在 xs 处，然后用 .d-md-block 从 md 向上显示>，而 .col-12 为 md 隐藏了 .d-md-none