I am trying to build a page with two columns of text, and have an image in the center of the page. I want the text to wrap around the image.

I tried making a row at the top which contains two columns. I also added the same row with two columns at the bottom of the page.

For the center of the page I made a row with three columns and placed text in the two outer columns and the image in the center column. Unfortunately this does not work well as when the web pages width is reduced, white space appears under the image due to the fact there is text in the two outer columns which take up more vertical space than the image does.

Is there any way to make it appear that text is wrapping around an image located in the center of the page?

I am relatively new to responsive website design and need all the help I can get.