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

Question

当屏幕在 Twitter-Bootstrap 3 中缩小到小和超小时，我遇到了右侧图像换行的问题。对于中型和大型显示器，它仍然在右侧。第一行是左侧的图像，右侧的文本仍然包裹图像，因为它在所有屏幕尺寸上都可以折叠并且工作正常 - 没有问题。我希望下面显示的第二行让文本在所有显示尺寸上都像第一行一样环绕在图像周围。你能帮我吗？我将不胜感激。

    <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

为 xs 设备添加媒体查询，并浮动图像，以便文本在移动设备上换行。

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