Media Object in BEM style (full)

Media Object Full HTML (BEM style)

/**
 * Media object. (BEM style)
 *
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*/

.media,
.media__body {
  overflow:hidden;
  _overflow:visible;
  zoom:1;
}
.media__body :first-child {
  margin-top: 0;
}
.media__image {
  float:left;
  margin-right: 10px;
}
.media--rev .media__image {
  float:right;
  margin-left: 10px;
  margin-right: 0;
}
/*when used inside an anchor*/
.media__image img {
  display:block;
}


<div class="media">
    <img class="media__image" src="//placehold.it/60&text=item" alt="" />
    <div class="media__body">
      <h2>Default media object</h2>
      <p>Does not wrap around item</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus officiis dolorem ad vel voluptatibus deleniti consequatur sit, quidem ex doloremque veniam aperiam cum magnam placeat excepturi at, ullam sint eius!</p>
    </div>
</div>

<hr />

<div class="media media--rev">
    <img class="media__image" src="//placehold.it/90&text=item" alt="" />
    <div class="media__body">
      <h2>Reversed media object</h2>
      <p>All that is required is to add <code>.media--rev</code> to media div</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolorum porro deserunt nulla autem cupiditate tempora praesentium pariatur reiciendis. Vel molestiae asperiores minima soluta ipsa ea harum totam nam aspernatur?</p>
    </div>
</div>