Basscss Media

Flexbox media object module for Basscss - http://basscss.com

Basic Usage

<div class="media">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Centered

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Bottom Aligned

<div class="media media-bottom">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Source Order

<div class="media">
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>

Double-Sided

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>

Multiple Images

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Responsive Media Objects

<div class="sm-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

<div class="md-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

<div class="lg-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>