Reordering boot items between stacks / columns without javascript

Question

Is it possible:

from this state after removal 3

:

without custom javascript ? (The word "without" is most important here). CSS, html, etc.

This is the playground code:

<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

So you can achieve this with CSS3 columns without bootstrapping.

Free script: https://jsfiddle.net/4ajv8fn7/4/

Note. JS in the fiddle is just a helper, so you can click on the cells to delete them :)

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