Bootstrap-列折叠时图像不环绕文本

Question

I am having a problem with an image on the right breaks to a new line when the screen collapses to small and extra small in Twitter-Bootstrap 3. It remains on the right for medium and large size displays. The first row is an image on the left where the text on the right remains wrapped the image as it collapses on all screen sizes and works fine - no problems. I want the second row shown below to have the text remain wrapped around the image on all display sizes as the first one does. Can you help? I'd be most grateful.

    <div class="row">
       <div class="col-md-3 col-md-offset-1">
        <img src="images/my-image-on-the-left.jpg" alt="my image" width="219" height="148" align="left" />
       </div>  <!--col -->
        <div class="col-md-6"><p><br /> Text goes here and wraps around the image on left no problem</p>
         </div>  <!--col -->
     </div> <!-- row -->
  <br />
   <div class="row">
      <div class="col-md-6 col-md-offset-1">
     <p> Text goes here but only wraps around the image on the right on medium and large displays</p>
      </div><!--col -->
     <div class="col-md-3"> <img src="images/my-image-on-right.jpg" alt="image-right" width="246" height="259" align="right" /> </div><!--col --> 
   </div><!-- row -->

Answer 1

Add a media query for xs devices, and float the images so that the text wraps on mobile devices.

@media (max-width: 768px) {
        .row img{
            float:left;
            margin:10px 0 10px 10px;
        }
    }