In Bootstrap 3 and for the most of the websites, the only way to build multi-column layouts was to set column widths and use floats. Then on mobile, you would just remove the float and width property so that it would change to be one column. Now with Flexbox, this is a new layout mode of CSS3 which is officially called CSS Flexible Box Layout Module. The main benefits of this layout mode is that it makes the following layout tasks easier:

  • – Alignment of items
  • – Direction
  • – Justify content
  • – Auto margins
  • – Ordering

Alignment of items
Set the Alignment of content use align-items utilities in flexbox containers for changing the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Justify content
Set the justify of content use justify-content utilities in flexbox containers for change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

Auto margins
Flexbox can do some pretty awesome things which can be applied to single flex items that are margins. The following margin classes for pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).

You can change order of a specific element by using the .order classes. In bootstrap flex layout valid classes are from 0 to 12, where the lowest number has highest priority (order-1 is shown before order-2, etc…):-