Бутстрап предлагает набор классов для разной ширины экрана. Их названия отличается сердцевиной. Для ширины экрана менее 768px - это xs
. Для ширины 768px и более - sm
. Для ширина от 1200 пикселей - lg
.
Условие, заданное для узкого экрана, продолжает выполняться, пока его не перебьёт условие для более широкого экрана. Если написать
<div class="col-xs-9 col-lg-6"></div>
<div class="col-xs-3 col-lg-6"></div>
то колонки будут равны только на экранах от 1200px и шире. А если сделать так
<div class="col-xs-9 col-sm-6"></div>
<div class="col-xs-3 col-sm-6"></div>
то колонки сравняются уже на 768px.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-9 col-lg-6" style="background:red; height:32px;"></div>
<div class="col-xs-3 col-lg-6" style="background:blue; height:32px;"></div>
</div>
<div class="row">
<div class="col-xs-9 col-sm-6" style="background:green; height:32px;"></div>
<div class="col-xs-3 col-sm-6" style="background:yellow; height:32px;"></div>
</div>
</div>