在 Bootstrap 中更改图像的堆叠顺序

Question

我正在处理包含两列的几行。一列包含文本，另一列包含图像。每行交替显示副本和图像的位置。

第一行左边是图片，右边是副本。 第二行右边是图片，左边是副本。 第三行左边是图片，右边是副本……以此类推……

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

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

救命！！

******HTML代码******

    <!-- 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

你需要把文本框放在右边，然后你可以按照这个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 始终使用 pull-right 类强制元素在右侧，并且在您的情况下，您不需要在小屏幕上右对齐文本框。

Answer 2

似乎没有效果，但会起作用：

<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>