Question

我有两个div行。在桌面中它应该像

A

乙

和移动设备应该是

乙

A

有没有办法在bootstrap 3的pull push功能中执行此操作？

在下面的演示中，您将看到蓝色和红色条带。

在桌面上，红色条带应位于顶部，而移动蓝色条带应位于顶部。

Demo

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;
  }

Answer 1

据我说，使用PILL / PUSH课程有点困难。我在项目中使用了Hidden / Visible类来实现相同的功能。

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>

在bootstrap 3中重新排序行

1 个答案: