如何根据屏幕大小对齐图像和文本？

Question

我是 Bootstrap 新手，需要帮助。

如您在我的代码中所见，我将文本和图像分为四列。我使用媒体查询（如 CSS 所示）根据屏幕大小设置对齐方式。但是，如果我正在调整窗口大小并达到平板电脑视图的屏幕大小，您可以说（检查屏幕截图 1）它看起来很乱，因为文本太大并且图像太靠近文本。因此，在这个屏幕尺寸（即平板电脑视图）下，我希望我的列垂直对齐（如 2 号屏幕截图），但我希望我的图像位于左侧，文本和标题应位于图像旁边。但它不应该干扰移动视图，因为一切都在移动视图的中心（检查屏幕截图 No.3），这对我来说已经很完美了。

如果我的问题还不够清楚，请查看模板http://www.templatemonster.com/demo/58152.html

他们有我喜欢的“工作团队”部分。

我期待得到帮助！

谢谢！

<div class="jumbotron">
<div id="wrapper"> <!--Wrapper-->
    <div class="container"> <!--Container-->
        <div class="row" style="padding-bottom: 40px;">
            <div class="col-md-12" align="center">
                <h1>Meet Us</h1><hr class="style1"></hr>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3">
                <img src="images/11.jpg" class="img-circle img-responsive" width="180"/>
            </div>
            <div class="col-sm-3">
                <h2 class="style1">Shaikh Obaidullah</h2>
                <h3 class="style1">CEO / Web Developer</h3>
                <hr class="style2"></hr>
                <p class="style1">I will be taking care of product development stages such as Requirements, Development, Functionality, Usability, and Technical Support.</p>
            </div>
            <div class="col-sm-3">
                <img src="images/12.jpg" class="img-circle img-responsive" width="180"/>
            </div>
            <div class="col-sm-3">
                <h2 class="style1">Ovais M. Shaikh</h2>
                <h3 class="style1">Graphic Designer</h3>
                <hr class="style2"></hr>
                <p class="style1">I will spice up your product with creative and unique designs so that you get the most attracted product in the end.</p>
            </div>
        </div>
    </div> <!--Container-END-->
</div> <!--Wrapper-END-->

    .jumbotron {
    background-image: url('../images/13.jpg');
    background-attachment: fixed;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.img-responsive {
    margin: 0 auto;
}

#wrapper {
    background-color: #FFF;
    background: rgba(0,0,0,.7);
    color: #FFF;
    padding-bottom: 40px;
}


hr.style1 {
    margin-bottom: 30px;
    margin-top: 30px;
    width: 100px;
    border-top: 2px solid #8884bc;
}


@media (min-width: 768px) {
h2.style1{
    color: #8884bc;
    text-align: left;
    margin-bottom: 0px;
}

h3.style1{
    text-align: left;
    margin-top: 10px;
}

hr.style2 {
    margin-bottom: 50px;
    margin-top: 50px;
    margin-left: 0px;
    width: 100px;
    border-top: 2px solid #8884bc;
}

p.style1{
    font-size: 20px;
    text-align: left;
    color: #eee;
}

.jumbotron{
    margin-bottom: 0px;
}
}

@media only screen and (max-width:768px) {
hr.style2 {
    margin-bottom: 30px;
    width: 100px;
    border-top: 2px solid #8884bc;
}

h2.style1{
    color: #8884bc;
    text-align: center;
    margin-bottom: 0px;
}

h3.style1{
    text-align: center;
    margin-top: 5px;
    font-size: 20px;
}

p.style1{
    margin-bottom: 80px;
    font-size: 16px;
    text-align: center;
    color: #eee;
}
}

Answer 1

我不知道我是否清楚地了解你。但我认为你的代码一定是这样的：

<div class="row">
  <<div class="col-md-5">    
    <div class="left">
      <img>
    </div>
    <div class="right">
      <h1>
      some text
      </h1>
    </div>
  </div>  

  <<div class="col-md-5">    
    <div class="left">
      <img>
    </div>
    <div class="right">
      <h1>
      some text
      </h1>
    </div>
  </div>   
</div>

而右边的类，必须是float:right;，而left是float:left; ,而且 col-md-5 必须是 display: inline-block;