While achieving this layout with CSS alone is simple, I'm having trouble implementing it using Bootstrap.
I am looking to have an image where the text wraps around it, either floated left or right. However, I want the image to span 3 columns for medium and large screens, while filling a single column for extra small and small screens.
So, for larger screens, something like this (please excuse my rough sketch):
Currently, I have managed to make it work somewhat... but it seems to only span 2 columns instead of 3:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<h2>About Them Guys</h2>
<p class="intro">Home is where you hang your hat. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl.</p>
<div class="col-md-11 col-md-offset-1">
<p><img src="http://img690.imageshack.us/img690/5169/36ng.png" class="col-md-3 img-responsive pull-left" alt="" />Bacon ipsum dolor sit amet short loin jerky salami sausage, hamburger t-bone doner filet mignon sirloin beef. Tail short ribs jerky leberkas prosciutto pastrami fatback jowl turkey t-bone bacon. Hamburger tail tri-tip, ribeye ham hock leberkas meatball pig short ribs jerky meatloaf. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl. Kevin cow turducken, pancetta fatback swine pig boudin ball tip kielbasa venison. Pig salami capicola chuck pancetta pork.</p>
</div>
</div> <!--row-->
</div> <!--col offset-->
</div> <!--row-->
If the entire paragraph is offset by a column, does the image col-md-3 count that first column offset as "1"? If I use col-md-4, then it does span the 3 columns - just making sure there's nothing I'm overlooking.
Thank you!