Bootstrap3 - Text wrap on right aligned images - html

Question

I am using Bootstrap 3. I have text on the left of the page and an image on the right. I am trying to get the text to wrap around an image. I've seen example of this for left aligned images, but I can't seem to get the opposite to work.
To show the error, I have created an example on JSFiddle.
There is a TITLE, then a banner, that should be half the page. They hockey player image should be to the right of the banner and the tops of the 2 images should be aligned, the text should start immediately under the banner, then wrap under the hockey player image. Like a newspaper layout.
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned-->
</div>
<div class="col-xs-12 col-sm-5 pull-right">
<h2> </h2>
<img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/>
</div>
<div class="col-xs-12">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
<div class="col-xs-12">
MORE TEXT HERE
Example Layout here

Answer 1

This may be what you want:
<div class="media">
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4>
...
</div>
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
</div>

Answer 2

Is this what you want?I made couple of divs and made it looks simple, you haven't added specific row to your header image, becausse of that both images started to stack inline.And i changed the columns divs.
CODEPEN exapmle
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned-->
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5 pull-right">
<img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/>
</div>
<div class="col-xs-7">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
</div>

Answer 3

Basically, any UI Framework(Bootstrap) depend on a grid. So you have to do separation of each block and put text different column and image have to put in different column.
.bg-img{
height:200px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL");
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-5">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>
</div>
<div class="col-xs-7">
<p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</div>
<div class="col-xs-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia.
</p>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<div class="bg-img">
<h4> Lorem ipsu6 dolor sit amet</h4>
</div>
</div>
<div class="col-sm-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
In above snippet I have taken 3 rows. In first row I am setting image in left side, In second row image set in right side and third row image set into first row with text on image. you can run my snippet. Good luck. happy to help.

Answer 4

I have solved with with bootstrap 3, it now behaves correctly:
https://jsfiddle.net/cec9086a/
<div class="container">
<div class="jumbotron">
<div class="row">
<h2>
My Title
</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 pull-left">
<img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/>
</div>
<div class="col-xs-12 col-sm-6 pull-right">
<img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>