bootstrap 5: two column layout, text should flow around image

Question

i just can't find the solution. i want to implement two columns in a row; in the left column there is an image (md-3 or lg-4) in the right column there is a long text (md-9 or lg-8).

when i'm at the end of the image, i want the text to flow around the image in the full grid width (12). as shown in the image: (https://i.stack.imgur.com/bilXe.jpg)

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

i'm working with bootstrap 5. i don't want to add any additional html but just insert the right bootstrap 5 classes that make it possible.

so far i've tried around with float-start / float-end, order-lg-1 / order lg-2 without success. is it even the row? does it have to be a d-flex? unfortunately i have no experience with that.

Answer 1

Solution:

1. Remove row

2. Remove grid width for 2nd div

3. Add float-none to 2nd div

4. Add float-start to 1st div

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