Nas tags você indica que sua dúvida tem relação ao Bootstrap 3
. Então, você precisa entender o conceito de grid
Exemplos pra resolver sua questão. Outros conceitos são margin
e padding
, mas o grid
é o mais importante aqui.
Também presumi, que você tenha algum conhecimento de criação de sites não responsivos.
E este é que é o problema.
Depois de 15 anos fazendo sites com <table>
e depois com o CSS anterior ao CSS3, também tive dificuldades pra entender coisas como esta.
Notei que você fala em colunas uma abaixo da outra... Colunas ficam uma ao lado da outra. Linhas ficam uma abaixo da outra.
No bootstrap você aninha colunas dentro de linhas.
<div class="row">
<div class="col-md-4">coluna 4/12 = 1/3</div>
<div class="col-md-4">coluna 4/12 = 1/3</div>
<div class="col-md-4">coluna 4/12 = 1/3</div>
</div>
<div class="row">
<div class="col-md-3">.coluna 3/12 = 1/4</div>
<div class="col-md-4">coluna 4/12 = 1/3</div>
<div class="col-md-5">coluna 5/12</div>
</div>
Este código cria duas linhas, cada uma com três colunas.
A primeira linha tem 3 colunas da mesma largura, cada uma com um terço do tamanho.
A segunda linha também com 3 colunas. cada uma com um tamanho diferente.
Você notou que dividi por 12? É porque o grid
do bootstrap
faz isso. Ele divide a largura da tela em 12 partes.
Tambem deve ter notado o md
. Este é um modificador de classe que indica que esta regra se aplica a monitores médios (pense tablet) para cima.
Ou seja col-md-3
, pode ser lido como ocupe um quarto (3/12=1/4) se a tela do dispositivo for média.
Agora, pense mobile first
, porque as regras do bootstrap são aplicadas de baixo para cima (em termos de tamanho).
Se você usar col-sm-7
estará dizendo ocupe 7 espaços de 12, quando a tela for pequena.
Então, não defina tamanhos absolutos ou percentuais para as div
. Entenda o grid
e adapte o layout do site para usa-lo.
No design responsivo, você pode criar uma versão de layout para cada tamanho de tela (jeito antigo, sem frameworks como boostrap) e ter a maior dor de cabeça pra manter as coisas funcionando. Ou pode entender melhor o conceito e fazer um único código para qualquer dispositivo.
Conceitos a estudar: grid, margin e padding.
Site do Boostrap em português