Why are the columns splitted on xs-viewport in Bootstrap? - css

Question

I am trying to understand Bootstrap, however - I can't figure out why this ain't working on xs. I have a total of 12 columns, but it still puts the col-xs-11 beneath the col-xs-1.
CSS:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
Result on xs:
with border-css
without border-css
Could someone tell me what I am missing here? The 2-8-2 is working properly, but the 1-11 not.
I am working on the latest version of Firefox + I am using Bootstrap version 3, not 4.
Edit 1:
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

Answer 1

What's happening is that your col-xs-1 column is reaching its minimum width based on its padding and content, and can't go any smaller. This means the col-xs-11 doesn't have enough space and is being pushed to the next line.
The problem is that the cols have 15px left & right padding so even if it was empty you col can't go any smaller than 30px.
Usually you would redistribute the cols on the smallest screen to allocate more space for the smallest cols, e.g.
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
However if that isn't an option, you could use media queries to adjust the padding for smaller screens, e.g.:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
#media (max-width: 400px){
[class^="col-"] {
padding-left:5px;
padding-right:5px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
(Note, the media query isn't working in the snippet for some reason, but this code does work in a standalone html page!)