Question

我正在使用包含两列的多行。一列包含文本，另一列包含图像。每行交替显示复制和图像的位置。

第一行左侧有图像，右侧有副本。第二行的图像在右侧，复制在左侧。第3行左侧是图像，右侧是副本......依此类推......

[网站：http://www.raa.com/dev/who-we-are.shtml#team]

我是Bootstrap的新手，我正在试图找出如何（在移动设备上）让图像显示在** ALL ROWS 上的副本下方。**目前查看网站时，图像和副本在每行的位置交替。我尝试了推/拉命令但没有成功。

帮助!!

****** HTML Code ******

    <!-- start Ronald Simmons area -->
<section id="ronaldSimmons">
    <div class="container">
        <div class="row">

            <div class="col-md-5">
                <img src="images/team-pics/simmons.png">
            </div>

            <div class="col-md-7">

                <font size="+3" color="#396598">MANAGEMENT</font>

                <p></p>

                <h2>
                    <div class="top-buffer-md">Ronald E. Simmons</div>
                </h2>
                <p class="lead"><font color="#396598">Chairman</font></p>

                <p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member
                    families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012
                    Ron was elected to serve in Texas State House of Representatives. He is a national speaker on
                    leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron
                    serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is
                    also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He
                    is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
                <p><a href="#team"><font color="#396598">Back to Top</font></a>

            </div>

        </div>
    </div>
</section>
<!-- end Ronald Simmons area -->

Answer 1

似乎没有效果，但可行：

<section id="ronaldSimmons">
<div class="container">
<div class="row">

<div class="col-md-7 visible-xs-*-*">

<font size="+3" color="#396598">MANAGEMENT</font><p></p>
<h2><div class="top-buffer-md">Ronald E. Simmons</div></h2>    
<p class="lead"><font color="#396598">Chairman</font></p>                    
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America.  In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division.  He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p> 
<p><a href="#team"><font color="#396598">Back to Top</font></a>  

</div>

<div class="col-md-5">
<img src="images/team-pics/simmons.png" > 
</div>

<div class="col-md-7">

<font size="+3" color="#396598">MANAGEMENT</font><p></p>
<h2><div class="top-buffer-md">Ronald E. Simmons</div></h2>    
<p class="lead"><font color="#396598">Chairman</font></p>                    
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America.  In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division.  He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p> 
<p><a href="#team"><font color="#396598">Back to Top</font></a>  

</div>

</div>
</div>
</section>

Answer 2

如果您需要在右侧放置文本框，则可以遵循此HTML结构

<section id="ronaldSimmons">
<div class="container">
    <div class="row">
        <div class="col-md-7 pull-right">
            <font size="+3" color="#396598">MANAGEMENT</font>
            <p></p>
            <h2>
                <div class="top-buffer-md">Ronald E. Simmons</div>
            </h2>
            <p class="lead"><font color="#396598">Chairman</font></p>
            <p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America.  In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division.  He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
            <p><a href="#team"><font color="#396598">Back to Top</font></a>  
            </p>
        </div>
        <div class="col-md-5">
            <img src="images/team-pics/simmons.png"> 
        </div>
    </div>
</div>

只需在小屏幕上添加css规则

@media only screen and (max-width: 767px){
    .pull-right{
        float: none !important;
    }
}

因为TB总是强制使用右上角的元素，在你的情况下，你不需要在小屏幕上右对齐文本框。

更改Bootstrap中图像的堆叠顺序

2 个答案: