对齐两列Twitter Bootstrap 3

Question

使用Twitter Bootstrap 3，我有两个colummns，一个有图像，另一个有文本。我试图将两个并排放置在桌面视图中，但是对于较小的屏幕（移动设备，平板电脑），文本必须落在图像下方。我尝试了各种浮动和定位css但不成功。

代码：

                        <div class="row">
                            <h2>History</h2>
                                <div class="col-md-6">
                                    <img class="img-rounded" src="img/fldry-ban.png"/>
                                        </div>
                        <div class="col-md-6">
                            <p> text  </p>
                                </div>
                                    </div>
                                        </div>

如果有人有时间提供我应该使用的CSS的一些细节，我将不胜感激。 ： - ）

Answer 1

到目前为止，您只是告诉浏览器：“嘿，如果我在中型屏幕设备上（col- md -6），让12个块中的6个用于显示！“的

您还需要为移动视图添加课程：

<div class="col-md-6 col-sm-12">

现在，移动浏览器也知道，他应该使用完整的12个块进行显示。

有关如何使用引导网格系统的更多信息，请查看this。

Answer 2

试试这个

 <img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/>


//or might be possible


<style>
  .custom > img{
    width:100%;
  }
</style>
<div class="row">
   <h2>History</h2>
         <div class="col-md-6 col-sm-6 col-lg-6 custom">
               <img class="img-rounded" src="img/fldry-ban.png"/>
         </div>
         <div class="col-md-6 col-sm-6 col-lg-6">
                 <p> text  </p>
         </div>
 </div>