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

Question

我正在尝试创建Google在任何地方使用的功能页面之一.在桌面浏览器上,它将在图像和文本之间交替(在第一行,它的图像然后是文本;一个是下一行,它是文本然后是图像).

但是,在移动屏幕上 - 我需要确保图像始终位于文本之前(因为它提供了上下文).这是一个例子:

我尝试使用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>

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