Css Media Object Source Order

Question

I love the idea behind using a media object module as described here:

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

It's css that can apply to lots of HTML patterns and has the big advantage that it doesn't matter how big the image is or how big the container is that the module is contained in.

The problem is that it relies on the media (eg the image) coming first in the source like this

    IMAGE
    STARTCONTENTDIV
    ENDCONTENTDIV

This becomes a semantic issue when within that content div you might have a heading like this:

    IMAGE
    STARTCONTENTDIV
      H1
      DESCRIPTION
    ENDCONTENTDIV

This way the h1 is after the image even though it should be before so the document outline makes sense. It should be like this:

    STARTCONTENTDIV
      H1
      DESCRIPTION
    ENDCONTENTDIV
    IMAGE

Does anyone have any ideas how to do this in a liquid layout container, when we don't know the widths of either the image or the content div?

Thanks in advance!

Answer 1

Flexbox allows you to rearrange content without knowing how wide the elements are. The down side is that support for it is poor (IE10+, Opera, Chrome; the current Firefox follows an older spec, but could do this layout).

<div class="container">
  <div class="child">
    <h1>Title Here</h1>

    <p>Paragraph o' text</p>
  </div>

  <img class="child" />
</div>

.container {
  display: flex;
}

div.child {
  flex: 1 1 auto;
  order: 2;
}

img.child {
  flex: 0 0 auto;
  order: 1;
}

http://jsfiddle.net/CNWGn/ (prefixes not included)