I have a layout that has the following template:
[1] [2] [3]
[4] [5] [6]
[7] [8] [9]
[10] [11] [12]And I would need both desktop and mobile to look like this:
[1] [5] [9]
[2] [6] [10]
[3] [7] [11]
[4] [8] [12]You have bootstrap today, but I've tried and tried all forms and nothing (flexgrid and similar). Does this exist in the bootstrap? Or if there is some other solution ...
Bootstrap 3 itself would not have it, but with a little help from CSS and grid-auto-flow: column; you get it.
.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>
<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 12And what I asked is if there is any tool that manages:
1 5 9
2 6 10
3 7 11
4 8 12