How can I allow the content to be appear beside the image and under the image also after the image ends?

Question

I am working on my blog posts in wordpress. What I want is the content of blog should be beside the post thumbnail and when the image ends the content should automatically cover the rest of the area I mean it should start under the image form the left? Here is the output image:

I this picture I have used bootstrap's grids system which is 6 columns to thumbnail and 6 columns to the content which is ok, but I want the content to automatically fill the rest of the space under the image? How can I achieve it using CSS or Bootstrap?

Answer 1

Since you are using bootstrap. This is impossible to do with its current setup.

Setting it to 2 columns at 50% with the image in one and all text/content in the other will display just like you have it.

You could need to set it to a col or col-12 and add the image/text in the same area.

Think old school WordPress content editor with image alignment.

Here is an example you could mimic to get the text to wrap. The jsfiddle is a working example.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://via.placeholder.com/150">
      Text goes here
    </div>
  </div>
</div>

https://jsfiddle.net/bazdin/kmn4u8xd/1/