css - Bootstrap 复杂列位置排序

Question

是否可以在 Bootstrap 网格系统中从另一列拉/推列的 div？例如:

在桌面上看:是这样的:

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>