What does "Horizontal at all times" mean?

Question

The new Bootstrap three documentation explains the grid behaviour as "Horizontal at all times" for extra small devices. What does this mean? Surely on a small device all columns would be stacked vertically upon one another? What's failing me here is my (lack of) understanding of what a grid is.

I'm coming from a non-designers perspective, and trying to iterate over a number of products into a responsive grid. The number of columns within each row will change dependant on whether an odd or even number of products is being displayed. <-- Bootstrap, and alike seems simple with static content over dynamic pages. For example, must we insert empty <div class="col-xs*"></div> to make it up to 12?

Answer 1

What "Horizontal at all times" means is that there is no breakpoint at which col-xs-* will change from being floated to stacked. For example:

<div class="col-xs-6"></div>
<div class="col-xs-6"></div>

In this example, there will always be two columns of equal size, whether you are on a phone, tablet, or desktop. For contrast:

<div class="col-sm-6"></div>
<div class="col-sm-6"></div>

In this example, the columns will be stacked until the viewport of the device is >=768, at which point it will switch to two columns of equal size.

The question you might be asking yourself is "Why all of these variations?" Well, what these options give us is the ability to customize the layout on various devices without having to get our hands dirty in CSS. For example, if I wanted two equal columns on a phone, but a 75/25 split on tablets and up, I would do the following:

<div class="col-xs-6 col-sm-8"></div>
<div class="col-xs-6 col-sm-4"></div>

If you wanted stacked on phones, equal on tablet, and 75/25 on desktop, then do this:

<div class="col-sm-6 col-md-8"></div>
<div class="col-sm-6 col-md-4"></div>

Because you are not explicitly specifying a grid for the phone, it is going to revert to stacked.

To get a solid feel, throw some simple grids together, and then start resizing your browser. You should be able to see how it changes much more easily than in the docs themselves.

EDIT

Thought of one other example that might be of interest: two equal columns at both phone and tablet, then 75/25 and desktop. The code:

<div class="col-xs-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>

This is actually a great illustration of "Horizontal at all times." Because we are not specifying a col-sm, col-xs continues to be enforced until we hit the desktop breakpoint, which is set at >=992.