Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389)

* remove the $enable-flex variable option

* remove bootstrap-flex.css dist file and it's grunt task

* remove the separate flex css file for docs; it's all the same now

* remove flexbox docs (porting some to the main grid docs in next commit)

* clean up few grid docs bits to simplify copy, start to mention flexbox

* port relevant flexbox-grid.md content to grid.md

- clean up mixins
- update how it works section
- bring over sizing and alignment sections

* remove the $enable-flex from the options.md page

* update lead paragraph to mention flexbox

* update migration to mention loss of ie9 support

* remove mention of flexbox dist file

* clarify IE support

* making a note

* remove flexbox variant mentions from component docs

- updates docs for media object, navs, list group, and cards to consolidate docs
- no more need to callout flexbox variants since it's now the default

* remove $enable-flex if/else from sass files

* remove flex dist files

* update scss lint property order to account for flex properties

* linting

* change to numberless classes for autosizing, wrap in highlighting div

* bump gruntfile and postcss to ie10

* redo intro sections

* rearrange

* phew, redo hella grid docs

- rearrange all the things
- consolidate some bits

* remove reference to flexbox mode

* more border action for demo

* Make some changes to the .card's in .card-deck's to ensure footers align to the bottom

3 files changed, 26 insertions, 55 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index efce231ce..8dfc8c861 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -435,7 +435,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
 
 ## Groups
 
-Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) can switch that to use `display: flex;` and provide the same effect.
+Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
 
 Only applies to small devices and above.
 
@@ -474,34 +474,30 @@ Need a set of equal width and height cards that aren't attached to one another?
 
 Only applies to small devices and above.
 
-**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
-
 {% example html %}
-<div class="card-deck-wrapper">
-  <div class="card-deck">
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-      </div>
+<div class="card-deck">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-      </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-      </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
 </div>
@@ -513,8 +509,6 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
 
 Only applies to small devices and above.
 
-**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts).
-
 {% example html %}
 <div class="card-columns">
   <div class="card">
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 8a02f9864..1c1384724 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -27,26 +27,7 @@ The most basic list group is simply an unordered list with list items, and the p
 
 ## Badge
 
-Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Below we use `.float-right` and `.mt-1` to align the badge to this example's specific needs, but you may need different or additional utilities.
-
-{% example html %}
-<ul class="list-group">
-  <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-right mt-1">14</span>
-    Cras justo odio
-  </li>
-  <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-right mt-1">2</span>
-    Dapibus ac facilisis in
-  </li>
-  <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-right mt-1">1</span>
-    Morbi leo risus
-  </li>
-</ul>
-{% endexample %}
-
-When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
+Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
 
 {% highlight html %}
 <ul class="list-group">
diff --git a/docs/components/navs.md b/docs/components/navs.md
index 2db4f4703..3b4b697a6 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -212,11 +212,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 </ul>
 {% endexample %}
 
-## Flexbox variations
-
-When in [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), tabbed and pilled navigation components gain access to additional nav styles. **These aren't available in default Bootstrap** due to a bug in table styles and responsive behavior.
-
-### Justified nav
+## Justified nav
 
 Create equal-width links in a navigation component by adding `.nav-justified` to a `.nav` component. This works with the inline, tab, and pill variants.
 
@@ -277,9 +273,9 @@ And pills, too:
 </ul>
 {% endexample %}
 
-### Centered nav
+## Centered nav
 
-Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
+Using our [flexbox utilities]({{ site.baseurl }}/layout/grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
 
 {% example html %}
 <ul class="nav nav-inline d-flex flex-items-center">