Reorder row in bootstrap 3

2019-08-30 09:05发布

I have two div rows. for which in Desktop it should be like

and for mobile it should be like

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.

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

标签： css3 twitter-bootstrap-3

1条回答

Deceive 欺骗

2楼-- · 2019-08-30 09:43

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 link : http://jsfiddle.net/Sharan_thethy/XRdt8/

I hope this will help you.

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>

0人赞添加讨论(0) 举报

Reorder row in bootstrap 3

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间