Bootstrap Breakpoints

All divs are 100% wide by default. When they have a -sm, -lg etc class applied, they have smaller widths and float:left applied when the viewport width is greater than the respective min-width setting

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { float:left; width: x%; }

Columns will revert to width:100% (stack)  when device width falls below 576px


// Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { float:left; width: x%; }

Columns will  revert to width:100% (stack)  when device width falls below 992px

// Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { float:left; width: x%; }

Columns will  revert to width:100% (stack)  when device width falls below 1200px

// Extra large (xl) devices (large desktops, 1200px and up)
@media (min-width: 1200px) { float:left; width: x%; }

Columns will  revert to width:100% (stack)  all the time

Grid

• Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
• In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>

-sm stack at < 768

-md stack at < 992

-lg stack at < 1200

-xl always 100% wide so always stack

Combining Breakpoints to resize content containers

col-xl-1 col-lg-2 col-md-3 col-sm-4 col-6