* Fix docs for heading sizes (sizes here were from v3)
* Added rem sizes to header size docs
* Fixed erroneous px sizes

* Add .img-fluid to card images in columns to ensure proper resizing
* change that variable from regular value to variable
* use calc to figure out a tighter border for card images

Closes #20507

[skip sauce]

- Update docs examples to use newer .form-check suite of classes
- Update form validation mixin to use newer classes as well

Fixes #20484

To be prefixed with `.table-`.

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)