add specific docs example for badged list group items

floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.

1 files changed, 20 insertions, 0 deletions

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index bc7c8b194..f241d0431 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -46,6 +46,26 @@ Add badges to any list group item to show unread counts, activity, etc.
 </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-xs-between` utility class](/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
+
+{% highlight html %}
+<ul class="list-group">
+  <li class="list-group-item flex-items-xs-between">
+    Cras justo odio
+    <span class="badge badge-default badge-pill">14</span>
+  </li>
+  <li class="list-group-item flex-items-xs-between">
+    Dapibus ac facilisis in
+    <span class="badge badge-default badge-pill">2</span>
+  </li>
+  <li class="list-group-item flex-items-xs-between">
+    Morbi leo risus
+    <span class="badge badge-default badge-pill">1</span>
+  </li>
+</ul>
+{% endhighlight %}
+
+
 ## Disabled items
 
 Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.