O conceito
Uma .row tem 12 colunas.
Enquanto a soma dos filhos couber em 12, todos ficam na mesma linha.
Quando passa de 12, o Bootstrap
quebra a linha — não espreme
ninguém. É essa conta simples que explica quase todo layout
"estranho" que aparece no trabalho de vocês.
col-N
Ocupa N das 12 colunas. col-4 = um terço.
col (sem número)
Auto-layout: divide o espaço que sobrou igualmente com os outros
col. Não ocupa um número fixo de colunas.
col-auto
Ocupa só a largura do próprio conteúdo. Útil para botões e ícones.
offset-N
Empurra o bloco N colunas para a direita, deixando um buraco. O
offset conta na soma: um
col-4 offset-2 gasta 6 das 12 colunas. É aí que a
linha quebra "sem motivo".
order-N
Muda a ordem visual sem tocar no HTML — é flexbox por baixo. O leitor de tela e o Tab continuam seguindo a ordem do código, então use com cuidado.
Mexa nos blocos
As 12 faixas ao fundo são as colunas do grid. Use-as para conferir a conta.
O HTML que você acabou de montar