Using .col-md-*grid classes you can create a grid system that fits mobile devices (col-sm-* and col-xs-*) and desktop devices (col-md-* and col-lg-*) devices.
Grid columns must be inside .row.

Two equal columns

Get TWO equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

Four equal columns

Get FOUR equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

Two different columns

Get two columns starting at desktops and scaling to large desktops.

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

Move columns to right with .col-md-offset-*. These class increases left margin of column by the number defined in *element.

Example: .col-md-offset-6moves .col-md-*over six columns.

Change column order with .col-md-push-*and .col-md-pull-*classes.

You can nest columns by adding a new .rowinstead of a .col-md-*in a existing .col-md-*column.