Considere o fragmento de código abaixo, em uma página que utiliza Bootstrap em condições ideais.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>A</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>B</p>
</div>
</div>
</div>
Esse fragmento resultará na divisão da largura da tela entre os dois contêineres na proporção de
20% / 80% em dispositivos de tela grande.
20% / 40% / 30% / 10% em todos os tipos de dispositivos.
60% / 40% em dispositivos de tela média.
25% / 75% em dispositivos de tela pequena.
33% / 66% em dispositivos de tela extragrande.