There are two grids available in pistachio. The bootstrap floated grid and the reflex flexbox grid. Standard layouts should by default use the bootstrap grid and where flexbox is required for advanced layout such as same height columns the reflex grid is appropriate.
Both grids use the same breakpoints.
// Extra small screen / phone @screen-xs-min: 480px; // Small screen / tablet @screen-sm-min: 768px; // Medium screen / desktop @screen-md-min: 992px; // Large screen / wide desktop @screen-lg-min: 1200px; // Larger screen / wider desktop @screen-xlg-min: 1600px;
See Bootstrap 3 Docs for example usage and more info.
n.b. In bootstrap defaults the
.col-xs-[n] class is the smallest breakpoint which is activated at
< 768px and allows for columns that never collapse to a single column. We have relegated this behaviour to
.col-xxs-[n] to give us collapsing columns using
.col-xs-[n] for screen sizes at
See Reflex Docs for example usage and more info.