As @PiLHA showed, it seems that the bootstrap 3 grid system does not support 1 slit column on screens less than about 360 pixels wide. The problem comes from a fixed 15px add-on that is added on each side to each column.
Now a little math to explain the problem:
The radius of one column .col-xs-1 has a certain width: 8.333333333333332%; (it's 100/12)
On a screen with a size of 320 pixels, like an iPhone, approximately equal to 27px; , but the combined fill forces its width to 30px . These extra pixels are the ones that cause the <div> to break to the next line.
Thus, an easy fix would be to simply reduce padding in the size of the column:
.col-xs-1 { padding-left: 5px; padding-right: 5px; }
Or you can also use col-xs-10 and col-xs-2 in your markup
In this case, you should take into account that @SeanRyan posted in his answer and correct your markup, I was going to post something like that, but I believe that his answer is well laid out and there is no need to repeat the same pointers.
source share