Bootstrap 3 hidden-xs делает строку более узкой

Я экспериментирую с загрузочными сетками Bootstrap 3 и пытаюсь заставить столбцы исчезнуть из строки, когда размер экрана мал. Я могу заставить столбец исчезнуть, но вся строка, кажется, становится более узкой в результате.

Вот мой код, который дает мне печаль:

<div class="container">
 <div class="row">
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col1
  </div>
  <div class="col-xs-4 col-sm-2" align="center">
   Col2
  </div>
  <div class="col-xs-12 hidden-xs col-sm-6 col-md-5" align="center">
   Col3
  </div>
  <div class="col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3 " align="center">
   Col4
  </div>
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col5
  </div>
 </div>
</div>

Столбцы Col4 и Col3 исчезают по мере того, как экран становится меньше, но при каждом удалении строка становится более узкой (по сравнению со строкой строки заголовка, которая не изменяется). Я не понимаю, потому что я убедился, что все блоки составляют до 12 для каждого этапа процесса. Хотя, возможно, проблема с col-xs-12 была проблемой, но удаление этого останавливает удаление столбца вообще и помещает удаленный столбец в Col5!

Мне явно не хватает "чего-то", но я ничего не могу найти, чтобы помочь мне - надеюсь Здесь я найду просвещение.

Ответ 1