Bootstrap 3：在移动屏幕上重新排序堆叠列

Question

我正在尝试创建Google在任何地方使用的功能页面之一。在桌面浏览器上，它会在图像和文本之间交替（在第一行，它的图像然后是文本;下一行是文本然后是图像）。

但是，在移动屏幕上 - 我需要确保图像始终位于文本之前（因为它提供了上下文）。这是一个例子：

我尝试使用Bootstrap的col-md-pull和col-md-push功能在移动设备屏幕上重新排序，但它没有用。

这是我的代码..我做错了什么？

<div class="container">
    <div class="row">
        <div class="col-md-4"><img src="..."></div>
        <div class="col-md-8">Feature 1 ...</div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-push-4">Feature 2 ...</div>
        <div class="col-md-4 col-md-pull-4"><img src="..."></div>
    </div>
</div>

Answer 1

请参阅此jsfiddle

<div class="container">
<div class="row">
    <div class="col-md-4">
        <img data-src="holder.js/100px150?bg=F3C40F">
    </div>
    <div class="col-md-8">
        <h1>Feature 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, debitis, reiciendis, repudiandae, placeat recusandae maxime fugiat explicabo voluptatem omnis commodi molestiae assumenda repellendus. Sequi, id ducimus cumque dolore ipsum beatae?</p>
    </div>
</div>
<div class="row">
    <div class="col-md-4 col-md-push-8">
        <img data-src="holder.js/100px150?bg=F3C40F">
    </div>
    <div class="col-md-8 col-md-pull-4">
        <h1>Feature 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, voluptatum, aut, eius, ut sunt quod quia maiores eos deleniti provident delectus dicta facere eum quasi harum esse aspernatur! Quas, cumque.</p>
    </div>     
</div>

我认为这将解决您的问题。

Answer 2

在第二个.row内对您的HTML进行重新排序（将图片放在上面的两个部分）：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="http://lorempixel.com/200/200">
        </div>
        <div class="col-md-8">Feature 1 ...</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-4">
            <img src="http://lorempixel.com/200/200">
        </div>
        <div class="col-md-8 col-md-pull-4">Feature 2</div>     
    </div>
</div>

更新示例：http://jsfiddle.net/52VtD/5839/