Bootstrap 3 wrap text around image

Question

I have one column of 3 which holds my text and then a column of 9 which holds the image for my project, if the text is longer than the image height I would like the text to wrap under the image, I have tried to nest columns but haven't been successful, I did just align the image right in a column of 12 with the text but on mobile I'd like the text to appear on top of the image, with the default column behaviour.

Here is my code :

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <h2 class="blue-header"><?php the_title(); ?></h2>
            <p class="first-para"><?php the_content(); ?></p>
        </div>
        <div class="col-md-9">
            <?php $image = get_field('single_project_image', $id ); ?>
            <img src="<?php echo $image[url]; ?>" class="img-responsive margin-image">
        </div>
    </div>
</div>

Here is a link to a Bootsnipp I created :

http://bootsnipp.com/snippets/6n3q5

Answer 1

I propose to duplicate the image. We will place the first instance before the text. This one will be float: right; on the wide screen. The second instance will be placed after the text. It will be visible on the narrow screen.

.img-clone-1 {
  max-width: 60%;
  margin: 18px 0 18px 18px;
}
.img-clone-2 {
  width: 100%;
  margin: 12px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-magic">
      <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-1 hidden-xs pull-right">
      <h2 class="blue-header">Test Project</h2>
      <p class="first-para">Marshmallow donut wafer oat cake chocolate bar jelly beans dragée. Donut macaroon lollipop. Chocolate cake dragée pastry donut cupcake dragée danish jelly-o.
      Jelly-o marzipan pastry cotton candy pudding halvah pastry pastry. Tart lemon drops bear claw sugar plum wafer. Icing icing gummies donut pie topping toffee muffin.
      Danish macaroon cookie toffee bear claw. Icing cheesecake pie cake pie fruitcake brownie. Gummi bears chocolate bar marshmallow chupa chups.
      Tart pudding tiramisu tootsie roll cake icing chocolate pie. Marshmallow donut cheesecake. Brownie halvah toffee ice cream powder lollipop wafer liquorice.
      Pudding dessert carrot cake pastry oat cake dessert toffee topping cheesecake. Lemon drops jelly-o chupa chups dragée. Pie muffin liquorice tiramisu icing oat cake brownie bear claw. Cake halvah soufflé caramels tiramisu.</p>
      <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-2 visible-xs img-responsive">
    </div>
  </div>
</div>

http://bootsnipp.com/snippets/qgqdg

Answer 2

What if you put the image inside the main column and floated it right? then set the margin around the image to give it the spacing you want.

<div class="container">
<div class="row">
    <div class="col-md-12">
        <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-responsive margin-image pull-right">
        <h2 class="blue-header">Test Project</h2>
        <p class="first-para">Marshmallow donut wafer oat cake chocolate ... snip ....
        </p>
        </div>
    </div>
</div>

Then for the mobile, under certain screen resolution, you could set the image to display block instead of being floated.