我有两个 div 行。在桌面上它应该是这样的
一个
B
对于移动端应该是这样的
B
一个
有没有办法在 bootstrap 3 的拉推功能中做到这一点？
在下面的演示中，您将看到一条蓝色和红色的条纹。
在桌面版中，红色 strip 应在顶部，而在移动版中，蓝色 strip 应在顶部。
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 类有点困难。 我在一个元素中使用了隐藏/可见类来实现相同的功能。
JSFiddle 链接: http://jsfiddle.net/Sharan_thethy/XRdt8/
希望对您有所帮助。
代码:
<!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>
关于css - 在 bootstrap 3 中重新排序行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24158494/