Remember, there may be children/students using these examples...

I updated the doc with an example of a flex layout of 3 columns where the center column is specified as a `.col-xs-5` to show that other columns will resize no matter what the width of the center column.
Experienced bootstrap developers will expect to have to use an even number for the center column width when in reality any size will work.
I believe this is quite useful information and doesn't add too much to the docs.
Another option would be to make that initial example a `.col-xs-5` instead of a `.col-xs-6` to highlight this fact in the first place.

https://bugzilla.mozilla.org/show_bug.cgi?id=504622
Refs #12359

[skip sauce]

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508895-dialog-element
Refs #20175

[ci skip]

- Creates new flexbox grid Sass file in our docs assets
- Updates the Gruntfile to compile said new Sass file and minify the output
- Update notice on flexbox docs page for how it works
- Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features)

- More details on columns and gutters
- Break it into clear sections

Remove mention of base class and fix grid examples

- Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col')
- Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding
- Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports