我正在尝试创建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>
解决方法
请参考这个
jsfiddle
<div class="container">
<div class="row">
<div class="col-md-4">
<img 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 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>
我认为这将解决您的问题.
