在没有javascript的“堆栈”/列之间重新排序引导元素

Question

是否可以：

从此状态，删除3后

有这个：

没有自定义 javascript？ （“没有”这个词在这里是最重要的）。 可以使用 CSS、html 等。

这是操场代码：

<div class="col-md-12">
<div class="col-md-4  rainbow1">
    <h1>1</h1>
</div>
<div class="col-md-4  rainbow2">
    <h1>4</h1>
</div>
<div class="col-md-4  rainbow3">
    <h1>7</h1>
</div>
<div class="col-md-4  rainbow1">
    <h1>2</h1>
</div>
<div class="col-md-4  rainbow2">
    <h1>5</h1>
</div>
<div class="col-md-4  rainbow3">
    <h1>8</h1>
</div>
<div class="col-md-4  rainbow1">
    <h1>3</h1>
</div>
<div class="col-md-4  rainbow2">
    <h1>6</h1>
</div>
<div class="col-md-4  rainbow3">
    <h1>9</h1>
</div>

    .rainbow1{
    color:darkblue !important;
    border:solid;
}
.rainbow2{
    color:#ff0000 !important ;
    border:solid;
}

.rainbow3{
    color:#ffd800 !important;
    border:solid;
}

.rainbow4{
    color:#4cff00 !important;
    border:solid;
}

.rainbow5{
    color:#0094ff !important;
}

.rainbow6{
    color:#b5ac78 !important;
    border:solid;
}

.rainbow7{
    color:#000000 !important;
    border:solid;
}
.rainbow8{
    color:#ff00dc !important;
    border:solid;
}

.rainbow9{
    color:#b6ff00 !important;
    border:solid;
}

.rainbow10{
    color:#ff006e !important;
    border:solid;
}

Answer 1

因此，您无需引导即可使用 CSS3 列实现此目的。

免费提琴：https://jsfiddle.net/4ajv8fn7/4/

注意：小提琴中的 JS 只是一个助手，因此您可以单击单元格将其删除:)

有关浏览器支持的来源和更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/columns

HTML

<div class="parent">
  <div class="cell rainbow1">
    <h1>1</h1>
  </div>
  <div class="cell  rainbow1">
    <h1>2</h1>
  </div>
  <div class="cell  rainbow1">
    <h1>3</h1>
  </div>
  <div class="cell rainbow2">
    <h1>4</h1>
  </div>
  <div class="cell rainbow2">
    <h1>5</h1>
  </div>
  <div class="cell  rainbow2">
    <h1>6</h1>
  </div>
  <div class="cell rainbow3">
    <h1>7</h1>
  </div>
  <div class="cell rainbow3">
    <h1>8</h1>
  </div>
  <div class="cell rainbow3">
    <h1>9</h1>
  </div>
</div>

CSS

.rainbow1 {
  color: darkblue !important;
  border: solid;
  padding: 1px;
}

.rainbow2 {
  color: #ff0000 !important;
  border: solid;
  padding: 1px;
}

.rainbow3 {
  color: #ffd800 !important;
  border: solid;
  padding: 1px;
}

.cell {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.parent {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  padding: 1px;
}