マルチカラムアイテムグループ内のブートストラップアイテムの順序

Question

ブートストラップリストグループ内のボタンの順序を変更しようとしています。私は現在、次のレイアウトを持っています（最初の行）。

私はそうのように、列の最初のレイアウトを達成しようとしています。

は、私は現在、これを実現するために、リストを再ソートするんだけど、問題を解決するために、よりエレガントなアプローチがある場合、私は思ったんだけど。

https://www.bootply.com/pFSlgefurQ

Answer 1

それははるかにエレガントですが、あなたは常にあなたのCSSに以下を追加することができれば、私は知らない。

.list-group { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    column-count: 3; 

    -webkit-column-gap: 0; /* Chrome, Safari, Opera */ 
    -moz-column-gap: 0; /* Firefox */ 
    column-gap: 0; 
} 

、各ブートストラップの列COL-MD-12そうのように行います。

<ul class="list-group"> 
    <button class="btn col-md-12">Row1</button> 
    <button class="btn col-md-12">Row2</button> 
    <button class="btn col-md-12">Row3</button> 
    <button class="btn col-md-12">Row4</button> 
    <button class="btn col-md-12">Row5</button> 
    <button class="btn col-md-12">Row6</button> 
</ul> 

同じ結果が得られます。 See here on bootply。