How to get grids in bs3 for a stack when the screen is less than 480 pixels?

Question

According to the document, additional small devices Phones (<768px) are always horizontal, i.e. never add up. I'm looking for a way to make meshes stacked when the screen is less than 480 pixels.

Answer 1

Add the col-xxs class to the columns:

@media (max-width: 480px) { .col-xxs { display:block; float:none; width: 100% } } 

Answer 2

You can use the class "col-sm- *". This is a “small” grid breakpoint, but at a level of less than 768 pixels, it will flow.

 <div class="container"> <div class="row"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> </div> </div> 

Demo: http://bootply.com/75567

Answer 3

If you just want the common “all columns should be full width <480px” you could do something like this to keep adding extra classes to the markup:

 [class^="col-"], [class*=" col-"] { display:block; float:none; width: 100%; }