html - 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 设备添加媒体查询，并 float 图像，以便文本在移动设备上换行。

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