Bootstrap: sort by column instead of row

Question

I have a layout that has the following model:

[1]   [2]   [3]
[4]   [5]   [6]
[7]   [8]   [9]
[10]  [11]  [12]

And it would need both desktop and mobile:

[1]  [5]  [9]
[2]  [6]  [10]
[3]  [7]  [11]
[4]  [8]  [12]

It’s bootstrap today, but I searched and tried every shape and nothing (flexgrid and the like). Is that on the bootstrap? Or if there is any other solution...

Answer 1

With Bootstrap 3 itself there would be no way, but with a little help of CSS and the grid-auto-flow: column; you can.

.wrapper {
    display: grid;
    /* linhas por coluna, até 4 no exemplo, e tamanho da linha */
    grid-template: repeat(4, 100px) / 1fr 2fr 1fr;
    grid-gap: 10px;
    grid-auto-flow: column;
    /* tamanho (width) de cada coluna, auto usado para ocupar o restante */
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #0767f7;
    border-radius: 5px;
    background-color: #fff4e6;
    padding: 10px;
}

.wrapper > div {
    border: 2px solid #4da9ff;
    border-radius: 5px;
    background-color: #a8d8ff;
    padding: 0.5em;
}

<div class="wrapper">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
   <div>10</div>
   <div>11</div>
   <div>12</div>
</div>

More information

Auto-placement in CSS Grid Layout

Answer 2

<div class="row">
   <div class="col-xs-12 col-sm-4 col-md-4">1</div>
   <div class="col-xs-12 col-sm-4 col-md-4">2</div>
   <div class="col-xs-12 col-sm-4 col-md-4">3</div>
   <div class="col-xs-12 col-sm-4 col-md-4">4</div>
   <div class="col-xs-12 col-sm-4 col-md-4">5</div>
   <div class="col-xs-12 col-sm-4 col-md-4">6</div>
   <div class="col-xs-12 col-sm-4 col-md-4">7</div>
   <div class="col-xs-12 col-sm-4 col-md-4">8</div>
   <div class="col-xs-12 col-sm-4 col-md-4">9</div>
   <div class="col-xs-12 col-sm-4 col-md-4">10</div>
   <div class="col-xs-12 col-sm-4 col-md-4">11</div>
   <div class="col-xs-12 col-sm-4 col-md-4">12</div>
</div> 

This will generate

1 2 3
4 5 6
7 8 9 
10 11 12

And what I asked, is if there is any tool that manages:

1 5 9 
2 6 10
3 7 11
4 8 12