对于Bootstrap 3中的小型设备，将上div向下和向下div移至ip

Question

我正在制作一个简单的网页，但是在我的小型设备中却存在一些问题。 所以我需要在这2个div上设置位置。

<div class="row">
    <div class="col-md-7">
        <div class="right" id="center">
            <img src="img/Golden-One-Page-Web-Template_40.png" alt="">
        </div>
    </div>
    <div class="col-md-5">
        <div class="left" id="center">
            <h4>february 2014<br/>Our Triumph</h4>
            <p>Proin iaculis purus consequat sem cure<br/>digni ssim. Donec porttitora entum suscipit<br/>aenean rhoncus posuere odio in tincidunt. Proin<br/>iaculis purus consequat sem cure digni<br/>ssim. Donec porttitora entum suscipit aenean.</p>
        </div>
    </div>
</div><!-- End row-->

因此，我需要在引导程序3的小型设备中将此left div移至上方，并将该right div移至下方，如果有人对此有任何想法，请给我一个正确而干净的答案

谢谢

Answer 1

由于您使用的是Twitter Bootstrap，因此可以使用它们的push和pull类来获得所需的效果。 首先从移动布局开始，然后在较高的断点处推拉元素。

<div class="row">
    <div class="col-sm-12 col-md-5 col-md-push-7">
        <div class="left" id="center">
            <h4>february 2014<br>Our Triumph</h4>
            <p>Proin iaculis purus consequat sem cure<br>digni ssim. Donec porttitora entum suscipit<br>aenean rhoncus posuere odio in tincidunt. Proin<br>iaculis purus consequat sem cure digni<br>ssim. Donec porttitora entum suscipit aenean.</p>
        </div>
    </div>
    <div class="col-sm-12 col-md-7 col-md-pull-5">
        <div class="right" id="center">
          <img src="http://placekitten.com/g/200/300" alt="">
        </div>
    </div>
</div><!-- End row-->

在此处引导： http : //www.bootply.com/BKR9irhYSy

有关推和拉的更多信息，请参见： http : //getbootstrap.com/css/#grid-column-ordering