Reordering bootstrap elements between "stacks"/columns without javascript

Is it possible to:

from this state, after deleting 3

have this:

without custom javascript? (Word "without" is most important here). CSS, html etc can be used.

This is 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;
}