Question

Bootstrap网格系统中的pull/push divs of a column是否可以another column？例如：

在桌面视图中：它是这样的：

Parent Column 1 | Parent Column 2
First Content   | Second Content
Third Content   | Fourth Content

在移动设备视图中，它是这样的：

Parent Column 1
First Content
Second Content
Parent Column 2
Third Content
Fourth Content

请查看this fiddle以了解我的意思。谢谢。

Answer 1

您可以使用bootstrap的网格来实现它。

.first {
  background: yellow;
  height: 300px;
}
.second {
  background: red;
  height: 100px;
  color: white;
}
.third {
  background: green;
  height: 300px;
  color: white;
}
.fourth {
  background: blue;
  height: 100px;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">

  <div class="row">
    <div class="col-sm-6 col-xs-12 first">
      FIRST
    </div>
    <div class="col-sm-6 col-xs-12 second">
      SECOND
    </div>
    <div class="col-sm-6 col-xs-12 third">
      THIRD
    </div>
    <div class="col-sm-6 col-xs-12 fourth">
      FOURTH
    </div>
  </div>
</div>

或者您可以使用Masonry JS：

var $container = $('.masonry-container');
$container.masonry({
  columnWidth: '.item',
  itemSelector: '.item'
});

.first {
  background: yellow;
  height: 300px;
}
.second {
  background: red;
  height: 100px;
  color: white;
}
.third {
  background: green;
  height: 300px;
  color: white;
}
.fourth {
  background: blue;
  height: 100px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">

  <div class="row masonry-container">
    <div class="col-sm-6 col-xs-12 first item">
      FIRST
    </div>
    <div class="col-sm-6 col-xs-12 second item">
      SECOND
    </div>
    <div class="col-sm-6 col-xs-12 third item">
      THIRD
    </div>
    <div class="col-sm-6 col-xs-12 fourth item">
      FOURTH
    </div>
  </div>
</div>

Answer 2

我认为问题更多的是浮动问题，因为您的列具有可变高度。创建一个特殊的类来在第二个和第三个柱子上拉大屏幕..

@media (min-width: 992px) {
    .pull-md-right {
        float:right;
    }
}

并且，像这样使用..

    <div class="row">
        <div class="col-md-6">
            <div class="first">First</div>
        </div>
        <div class="col-md-6 pull-md-right">
            <div class="second">Second</div>
        </div>
        <div class="col-md-6 pull-md-right">
            <div class="third">Third</div>
        </div>
        <div class="col-md-6">
            <div class="fourth">Fourth</div>
        </div>
    </div>

http://codeply.com/go/CYteNdheKS

在Bootstrap 4中，包含responsive floats，因此您不需要额外的CSS。

Bootstrap复杂列位置排序

2 个答案: