Question

我在网页上有两行：在第一行，图像在左侧，文本在右侧。对于第二行，反之亦然。当我在移动设备上看到该页面时，左侧的图像位于文本的顶部，而右侧的图像位于文本的底部。

我希望所有图片都位于文字的顶部，无论是在屏幕的右侧还是左侧。

我该怎么做？

HTML代码

<section class="pagecontent first_row" id="pagecontent">
    <div class="container">
        <div class="row">
            <div class="col-md-5 text-center animated wow fadeInLeft">
                <div class="iphone1">
                    <img src="images/image1.png" alt="" titl="">
                </div>
            </div>

            <div class="col-md-7 animated wow fadeInRight">
                <div class="features_list1">
                    <h1 class="text-uppercase">Text on Right</h1>
                    <p>Some text</p>
                </div>                  
            </div>
        </div>
    <hr class="style3">
    </div>
</section>

<section class="pagecontent second_row" id="pagecontent">
    <div class="container">
        <div class="row">
            <div class="col-md-7 animated wow fadeInLeft">
                 <div class="features_list1">
                     <h1 class="text-uppercase">Text on Left</h1>
                     <p>Some text</p>
                </div>  
            </div>

            <div class="col-md-5 text-center animated wow fadeInRight">
                <div class="iphone1">
                    <img src="images/image2.png" alt="" titl="">
                </div>  
            </div>
        </div>
        <hr class="style3">
    </div>
</section>

一些CSS代码

.pagecontent .iphone1{
    max-width: 359px;
    position: relative;
    display: inline-block;
    text-align: center;
}

.pagecontent .iphone1 img{
    width: 100%;
    height: auto;
    padding-bottom: 15px;
}
 .pagecontent .features_list1 p{
    color: #767272;
    font-family: "open_regular", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 19px;
    text-align: justify;
}

任何帮助都会有用。

Answer 1

col-push-*和col-pull-*可以帮助您

<div class="container">
  <div class="row">
    <div class="col-md-5 text-center animated wow fadeInRight col-md-push-7">
  <div class="iphone1">
    <img src="http://placehold.it/150x150" alt="" titl="">
  </div>
</div>

<div class="col-md-7 animated wow fadeInLeft col-md-pull-5">
  <div class="features_list1">
    <h1 class="text-uppercase">Text on Left</h1>
    <p>Some text</p>
  </div>
    </div>
  </div>
</div>

您可以在JSFiddle

中看到

如何在移动屏幕上的文本顶部对齐右侧图像

1 个答案: