0

Tenho um layout que tem o seguinte modelo:

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

E precisaria que, tanto no desktop e mobile, ficasse asssim:

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

Está com bootstrap hoje, mas procurei e tentei todas as formas e nada (flexgrid e afins). Isso existe no bootstrap? Ou se existir alguma outra solução...

2
  • Vc vai conseguir isso com Grid: w3.org/TR/css-grid-1 e aqui um guia: css-tricks.com/snippets/css/complete-guide-grid parece que o Bootstrap4 funciona com Grid, depois da uma olhada lá na documentação pra ver se te ajuda e se é viável migrar pro BS4. Vc tb pode contruir seu próprio grid com o CSS Grid Layout e depois usar as classes do BS só nos componentes
    – hugocsl
    31/01/2018 às 17:13
  • Cara tente ser mais claro na sua pergunta, colocar o html auxilia no processo de entendimento por parte dos outros, o que seria os colchetes? Imagens?
    – LeAndrade
    31/01/2018 às 17:13

2 Respostas 2

1

Com o Bootstrap 3 em si não teria como, mas com uma ajuda de um pouco de CSS e do grid-auto-flow: column; você consegue.

.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>

Mais informações

Auto-placement in CSS Grid Layout

0

<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> 

Isso vai gerar

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

E o que perguntei, é se existe alguma ferramenta que gere:

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

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .