Change stacking order of images in Bootstrap

I'm working with several rows that contain two columns. One column containing text and the other containing an image. Each row alternates where the copy and image are displayed.

The 1st row has the image on the left, copy on right. The 2nd row has the image on the right, copy on left. The 3rd row has the image on the left, copy on right... and so on...

[website: http://ift.tt/1CdreZo]

I'm new to Bootstrap and am trying to figure out how (on Mobile devices) to get the image to appear below the copy on **ALL ROWS.** Currently when viewing the site, the image and copy alternate in position for each row. I tried the push/pull commands with no success.

Help!!

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