overhaul the docs and css to merge into 2.1.2 since this was against master

less/media.less

@@ -1,69 +1,55 @@
-// COMMON STYLES
-// -------------
+// Media objects
+// Source: http://stubbornella.org/content/?p=497
+// --------------------------------------------------
 
-.media, 
+
+// Common styles
+// -------------------------
+
+// Clear the floats
+.media,
 .media-body {
   overflow: hidden;
   *overflow: visible;
   zoom: 1;
 }
-.media {
-  margin-bottom: 10px;
-}
+
+// Proper spacing between instances of .media
+.media,
 .media .media {
-  margin-top: 20px;
+  margin-top: 15px;
 }
+.media:first-child {
+  margin-top: 0;
+}
+
+// For images and videos, set to block
+.media-object {
+  display: block;
+}
+
+// Reset margins on headings for tighter default spacing
+.media-heading {
+  margin: 0 0 5px;
+}
+
+
+// Media image alignment
+// -------------------------
+
 .media .pull-left {
   margin-right: 10px;
 }
 .media .pull-right {
   margin-left: 10px;
 }
-.media .media-object {
-  display: block;
-}
 
-// Media list
-.medias {
-  margin-top: 20px;
+
+// Media list variation
+// -------------------------
+
+// Undo default ul/ol styles
+.media-list {
   margin-left: 0;
-  list-style-type: none;
+  list-style: none;
 }
-.medias .media {
-  padding-bottom: 10px;
-  border-bottom: 1px solid rgba(0,0,0,.07);
-}
-.medias > .media.last {
-  margin: 0;
-  border-bottom: none;
-}
-.medias > .media .media {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-} 
-
-// Media box
-.media-box {
-  margin-bottom: 19px;
-  padding: 10px;
-  background-color: #fff;
-  border: 1px solid rgba(0,0,0,.09);
-  .border-radius(4px);
-  .box-shadow(1px 1px 2px rgba(0,0,0,.1));
-}
-
-@media (max-width: 480px) {
-.media .pull-left,
-.media .pull-right  {
-  float: none;
-  display: block;
-  margin-bottom: 10px;
-}
-.media .pull-left {
-  margin-right: 0; // we stack the components so the indent is not needed anymore 
-}
-.media .pull-right {
-  margin-left: 0; // we stack the components so the indent is not needed anymore 
-}
-}

less/responsive-767px-max.less

@@ -156,16 +156,16 @@
   }
 
   // Medias
+  // Reset float and spacing to stack
   .media .pull-left,
-  .media .pull-right {
+  .media .pull-right  {
     float: none;
     display: block;
     margin-bottom: 10px;
   }
-  .media .pull-left {
+  // Remove side margins since we stack instead of indent
+  .media-object {
     margin-right: 0;
-  }
-  .media .pull-right {
     margin-left: 0;
   }