What does horizontal at all times mean?

Question

The new Bootstrap documentation explains grid behavior as "Horizontal Time" for additional small devices. What does it mean? Of course, on a small device, will all columns be vertically stacked on top of each other? I can't figure out what a grid is.

I take the perspective of non-designers and try to sort out a few products into a flexible grid. The number of columns in each row will vary depending on whether the odd or even number of products is displayed. <- Bootstrap, and it seems to be just with static content across dynamic pages. For example, should we insert an 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 swimming to stackable. For instance:

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

In this example, there will always be two columns of the same size, whether on the 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 added until the device’s viewing area is> = 768, at which point it will switch to two columns of the same size.

The question you can ask yourself is: “Why all these variations?” Well, what these options give us is the ability to customize the layout on different devices without trying to trick your hands into CSS. For example, if I wanted two identical columns on the phone, but split them into tablets 75/25 or higher, 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 want the phones to be the same, equal on tablets and 75/25 on the desktop, do the following:

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

Since you are not explicitly specifying a grid for the phone, it will return to styling.

To get a tangible feel, merge a few simple grids together, and then start resizing your browser. You should be able to see how this changes much more easily than in the documents themselves.

EDIT

The thought of another example that may be of interest: two equal columns on the phone and tablet, then on 75/25 and on the desktop. Code:

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

This is actually a great horizontal illustration. Since we do not specify col-sm, col-xs continues to be applied until we hit the desktop breakpoint that is set to> = 992.