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.

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index bc7c8b1948af75691c7536ebcb7ce68f5ddbb2b6..f241d0431a51cdba8e7f8df048250e734d775a83 100644 (file)
--- 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.