Flexbox media object with table-cell fallback

media.scss

.media {
  display: table;
  display: flex;
  align-items: flex-start;
}

.media-figure {
  margin-right: $baseline;
}

.media-body {
  display: table-cell;
  vertical-align: top;
  flex: 1;
}

.media-body,
.media-body :last-child {
  margin-bottom: 0;
}

.media-title {
  margin: 0 0 $baseline/2;
}

.media-figure {
  display: table-cell;
  display: block;
  vertical-align: top;
}

// Modifiers
.media.-reverse > .media-figure {
  order: 1;
  margin: 0 0 0 $baseline;
}

.media.-center {
  align-items: center;

  > .media-figure,
  > .media-body {
    vertical-align: middle;
  }
}