Sistema de grid | Bootstrap: velocidade no front-end

Alcirléia, vamos lá!

col-lg você usa para telas largas (≥1200px)
col-md você usa para telas médias (≥992px)
col-sm você usa para telas pequenas (≥768px)
col-xs você usa para telas muito pequenas (<768px)

Dito isso se você deseja que um item tenho 1 coluna em qualquer tamanho de dispositivo, por exemplo um cabeçalho, você pode definir: class="col-xs-12", pois essa coluna terá sempre 100%. Já que você não inseriu nenhum "breakpoint". Ele sempre terá o tamanho definido pelo coluna no caso (100%).

Agora caso você queira que uma coluna tenha 100% em um dispositivo pequeno e em dispositivos maiores ela tenha 50%, você deve começar pelo menor caso: class="col-xs-12" e depois acrescentar os 50% onde você deseja que ela mude: class="col-xs-12 col-md-5". Veja que aqui definimos um "breakpoint" ela terá 100% nas telas muito pequenas e 50% nas telas médias.

Você pode combinar as 4 classes para definir os seus "breakpoints", sugiro que insira um valor para cada uma das classes e redimensione o navegador para ver o comportamento.

Ex.:

<div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Se ainda estiver em dúvida só perguntar novamente!