[英]How to reorder bootstrap columns based on mobile view
I have seen there are some examples of using push/pull with bootstrap 3 but I haven't had much like trying it out.我已经看到有一些在 bootstrap 3 中使用 push/pull 的例子,但我并没有很想尝试一下。 Is it possible in this example to get
col-sm-4
content to show before col- sm-5 col-lg-12
on mobile as col-sm-4
is currently showing last on mobile.在此示例中,是否有可能在 col-sm
sm-5 col-lg-12
之前在移动设备上显示col-sm-4
内容,因为col-sm-4
当前在移动设备上最后显示。
<section id="inner-page" class="container">
<div class="row">
<div class="col-lg-8 col-sm-7">
<div class="post-media">
<div id="slider" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li></li>
</ul>
</div>
</div>
<div class="row mTop-20">
<div class="col-sm-5 col-lg-12">
content
</div>
</div>
</div>
<div class="col-sm-4">
content
</div>
</div>
</section>
With Bootstrap 3使用引导程序 3
You can use push
and pull
classes您可以使用
push
和pull
类
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div style="border: 1px solid red" class="col-sm-4 col-lg-push-8 col-sm-push-7"> content </div> <div style="border: 1px solid green" class="col-lg-8 col-sm-7 col-sm-pull-4"> <div class="post-media"> <div id="slider" class="flexslider"> <ul class="slides"> <li></li> </ul> </div> <div id="carousel" class="flexslider"> <ul class="slides"> <li></li> </ul> </div> </div> <div class="row mTop-20"> <div class="col-sm-5 col-lg-12"> content </div> </div> </div> </div>
With Bootstrap 5使用引导程序 5
You can use the order property您可以使用 order 属性
order-0 order-sm-2
for col-sm-4
and the classe order-1
for col-sm-7
col-sm-4
添加 class order-0 order-sm-2
和 col col-sm-7
的 classe order-1
or the flex-direction property或 flex-direction 属性
flex-column-reverse flex-sm-row
for the rowflex-column-reverse flex-sm-row
row
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.