[英]Bootstrap reorder image and text in mobile view
我有这样的代码,它具有替代的图像和文本,但是在移动设备中,它应该是文本和图像/文本和图像,但是我得到的是文本和图像/图像和文本
[1]<!-- Project One -->
<div class="row">
<div class="col-md-6">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-6">
<h3>Project Two</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- /.row -->
放置img
,然后放置text
并使用pull-right
和pull-left
类对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class=container> <div class="row clearfix"> <div class="col-md-6 pull-right"> <a href="#"> <img class="img-responsive" src="http://placehold.it/700x300" alt=""> </a> </div> <div class="col-md-6 pull-left"> <h3>Project One</h3> <h4>Subheading</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </div> </div> <!-- /.row --> <hr> <!-- Project Two --> <div class="row"> <div class="col-md-6"> <a href="#"> <img class="img-responsive" src="http://placehold.it/700x300" alt=""> </a> </div> <div class="col-md-6"> <h3>Project Two</h3> <h4>Subheading</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </div> </div> </div>
您需要在图像上方的div中添加push-xs-6类(在此处有col-md-6),在文本上方的div中添加pull-xs-6类。 它将交换宽度小于768px的设备上的位置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.