Wrap text around an image when image only spans one column

Question

I am trying to wrap text around an image, where the text is in two columns, and the image spans one, like this:

I can't use column count because it just pushes the image to the side (link below), and I can't seem to use flex as it needs separate containers (same link)

<img class="media-one-image-wrap" />
<div class="wrap-text">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

<p>Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>

<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>
</div>              
                    

<!-- WITH FLEX
                 -->
<div class="flex-example">

<div class="flex-col">  
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

<p>Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>

<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>
  
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>
  
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>  
  
</div>          
  
 <div class="flex-col">  
<img class="media-one-image-wrap-flex" />
  </div>
  
</div>  

            

CSS

img.media-one-image-wrap {
  width: 40%;
  height: 200px;
  background-color: red;
  float:right;
}

.wrap-text {
  float: none;
  column-count:2;
}

.flex-example {
  margin-top:100px;
  display:flex;
  position:relative;
}



img.media-one-image-wrap-flex {
  min-width: 400px;
  height: 200px;
  background-color: blue;
}               

            
            

https://codepen.io/shereewalker/pen/abQXQZo

I've been searching for a while, but I'm not sure at this point it can be done.

Answer 1

I do not completely understand your intention, but I believe this may be useful for you.
I tried to replicate the image you posted.

The following code implements the Bootstrap library, which facilitates the implementation of columns.
I have created two examples: the first one uses two columns per row, totaling four columns; whereas the second one has only one row with two columns.

I hope this information proves helpful.

 <center><h2>FIRST METHOD</h2></center>
  <div class="container">
    <div class="row">
      <div class="col">
        <p>
        <!-- TEXT HERE -->
        </p> 
      </div>
      <div class="col">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Example_image.svg/600px-Example_image.svg.png">
      </div>
    </div>
    <div class="row">
      <div class="col">
        <p>
        <!-- TEXT HERE -->
        </p>
      </div>
      <div class="col">
       <p>
       <!-- TEXT HERE -->
       </p>
      </div>
    </div>
  </div>

Find the code in full here