Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera gostaria de transformar o template desse meu web site de uma so Sidebar Widgets Column para duas tipo ficaria postagem no meio das duas Sidebar Widgets.
Como posso fazer isso?
Site que quero fazer isso: https://linkatorrents.net/
Show me ajudou muito e consegui fazer. So to com mais uma duvida.
E se quando tiver na versao mobile eu quiser que as postagens apareça primeiro que as duas colunas como eu faço?
@alysson122010 Então jovem, nas versões 3x você conseguia reposicionar as colunas utilizando "push" e "pull". Nas versões mais atuais (4x) agora se utiliza a classe "order-*". A ideia é a mesma, ou seja, reposicionar as colunas de acordo com o breakpoint, segue um exemplo básico mas didático baseado na sua necessidade:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 order-md-2">
Content
</div>
<div class="col-sm-12 col-md-3 order-md-1">
First Sidebar
</div>
<div class="col-sm-12 col-md-3 order-md-3">
Second Sidebar
</div>
</div>
</div>
Abs.
@alysson122010 Boas. O conceito do Bootstrap é bem simples, basicamente a estrutura se define:
- .container (absoluto) ou .container-fluid (relativo)
- .row
- .col-*
A quantidade máxima de colunas por linha é 12 (ocupando todo a largura do container, mais do que isso, haverá quebra de linha), então se você precisa de 3 colunas, faça a divisão pelo total de 12 para cada de acordo com a sua preferência. Poderia ser algo como:
1 de 3 + 1 de 6 + 1 de 3 (3 colunas totalizando 12 espaços)
1 de 2 + 1 de 8 + 1 de 2 (3 colunas totalizando 12 espaços)
No seu exemplo, você tem 1 coluna de 8 e outra de 4 - então basicamente seria copiar a coluna de 4 e jogar antes da de 8 e alterar o valor dessas para totalizar os 12 espaços.
Abs.