引导网格系统 - 根据大小使列更改行答案

【问题标题】：Bootstrap grid system - make column change row depending on size引导网格系统 - 根据大小使列更改行
【发布时间】：2018-07-07 20:25:00
【问题描述】：

我正在尝试获得一个行为类似于此页面上的网格系统：http://weibergmedia.com/demos/yk

您可以看到网格根据窗口大小完全重新排列；保留列大小，直到它们基本上是 col-xs-12，此时窗口大小非常小。

任何能让我朝着正确方向工作的建议都将不胜感激。目前我所能想到的就是编写一个复杂的 javascript 来复制行为。

【问题讨论】：

您是否对使用 Bootstrap 很执着，或者 CSS Grid 或 Flexbox 是否值得您学习？
您可以使用 Isotope 实现此目的，请查看：isotope.metafizzy.co
我会看看这两个。我现在可以看到我在原始帖子中包含的示例页面使用了同位素。但我相信 CSS Grid 和 Flexbox 也值得我研究。非常感谢:-)
看同位素我觉得这是最好的选择。 @FurkanPoyraz 考虑通过一个小例子转换为答案，因为这应该符合他的需求。

标签： html css grid bootstrap-grid

【解决方案1】：

您可以使用同位素实现此目的。将它与 Bootstrap 网格系统一起使用将如下所示：

var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.grid-item',
  percentPosition: true
});

.box {
  background-color: tomato;
  width: 100%;
  height: 100%;
}

.grid-item {
  height: 255px;
  margin-bottom: 30px;
}

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row grid">
    <div class="grid-item col-sm-3">
      <div class="box">Box 1</div>
    </div>
    <div class="grid-item col-sm-3 col-lg-6">
      <div class="box">Box 2</div>
    </div>
    <div class="grid-item col-sm-3">
      <div class="box">Box 3</div>
    </div>
    <div class="grid-item col-sm-3 col-md-6">
      <div class="box">Box 4</div>
    </div>
    <div class="grid-item col-sm-3">
      <div class="box">Box 5</div>
    </div>
    <div class="grid-item col-sm-3">
      <div class="box">Box 6</div>
    </div>
  </div>
</div>

【讨论】：