Definition
It's a very occurring pattern to have an image side-by-side with text or another content. The purpose of the media object is solve that situation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.
<div class="o-media">
<div class="o-media__img"></div>
<div class="o-media__body"></div>
</div>
Reverse modifier
Flips the object layout, putting the image at the right side and the content at the left.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi doloribus voluptatum iste unde necessitatibus non, ipsam fuga! Libero voluptate fugiat eos adipisci. Doloremque possimus qui, libero distinctio id quod? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed a dolorem asperiores nam ipsum? Atque velit ipsam quo voluptatibus nesciunt id explicabo asperiores aut ipsa, recusandae, alias perferendis quas rem.
<div class="o-media o-media--reverse">
<div class="o-media__img"></div>
<div class="o-media__body"></div>
</div>