I am currently testing out the Bootstrap 3 responsive grids and attempting to hide a column from a row when the screen size is small. However, I find that when the column disappears, the entire row seems to shrink in width.
Here's the code causing me some frustration:
<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>
As the screen size decreases, Col4 followed by Col3 vanish but the row reduces in width with each disappearance (in contrast to a header row that remains constant). I have ensured that the total width of all columns adds up to 12 for each breakpoint, so I'm puzzled as to why this issue occurs. Initially, I suspected the culprit might be the col-xs-12, however deleting it prevents the column from disappearing at all or makes it merge with Col5!
There must be something that I am overlooking, but my quest for an answer has proven fruitless thus far – perhaps someone here can shed some light on this matter.