Не используйте стандартную сетку, а сделайте свой блок для шапки , например задавая ширину и высоту в процентах.
Или если хотите использовать стандартную сетку, то для каждой стандартной ширины вьюпорта
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
настройте отображение шапки и составляющих ее блоков с помощь css-классов .col-xs-XX, col-sm-XX .col-md-XX, .col-lg-XX, .col-lg[xs,sm,md,lg]-offset, .visible-xs[xs,sm,md,lg]-block, .col-md[xs,sm,md,lg]-pull-XX, .col-md[xs,sm,md,lg]-push-XX - здесь XX числа от 1 до 12(12 это кол-во столбцов в стандартной сетке). Например:
<div class="col-xs-6 col-sm-4 .col-md-4 col-lg-6">содержимое блока</div>
А лучше читайте
документацию по сетке