添付のスクリーンショットのような動的グリッドレイアウトを、ブートストラップを使用して番号順に表示するにはどうすればよいですか？

ああ！以下のこれは完全に機能します。私がすぐにやったこのbootplyをチェックしてください。

<div class="col-sm-3">
  <div class="col-sm-12">1</div>
  <div class="col-sm-12">5</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">2</div>
    <div class="col-sm-12">6</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">3</div>
    <div class="col-sm-12">7</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">4</div>
    <div class="col-sm-12">8</div>
</div>

非常に小さな画面でdivの順序を並べ替えたい場合は、プッシュとプルが必要になることはわかっているので、これはStackOverflowで非常によく答えられたプッシュとプルへのリンクです。