在引导序列3中重新排序 [英] Reorder row in bootstrap 3
本文介绍了在引导序列3中重新排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个div行。在桌面中应该像
I have two div rows. for which in Desktop it should be like
A
B
和移动版应该像
B
A
在bootstrap 3的pull push功能中有没有办法吗？
Is there a way to do it in pull push feature of bootstrap 3?
在下面的演示中你会看到一个蓝色和红色的条带
In below demo you will see a blue and red strip.
桌面上的红色条应位于顶部，移动蓝色条应位于顶部。
In desktop red strip should be on top where as in mobile blue strip should be on the top.
HTML
<div class="row">
<div class="col-md-12 row1 clearfix" >
<div class="col-md-3 col-xs-6 col-md-push-6">A</div>
<div class="col-md-3 col-xs-6 col-md-push-6">B</div>
<div class="col-md-6 col-xs-12 col-md-pull-6">C</div>
</div>
<div class="col-md-12 row2 clearfix">D</div>
</div>
CSS
.row1 {
background:red;
}
.row2 {
background:blue;
}
推荐答案
难以通过使用PILL / PUSH类。
我在项目中使用了Hidden / Visible类来实现相同的功能。
According to me Its a bit difficult by using PILL/PUSH classes. I have used Hidden/Visible classes in a project for same functionality.
JSFiddle链接： http://jsfiddle.net/Sharan_thethy/XRdt8/
我希望这将帮助你。
CODE：
<!DOCTYPE html>
<html lang="en">
<head>
<title>tast exp</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<style>
.row1 {
background:red;
}
.row2 {
background:yellow;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12 row2 visible-xs">yellow box top</div>
<div class="col-md-12 row1 clearfix" >
<div class="col-xs-6">red box left</div>
<div class="col-xs-6">red box right</div>
</div>
<div class="col-md-12 row2 hidden-xs clearfix">yellow box bottom</div>
</div>
</body>
</html>
这篇关于在引导序列3中重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
