1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .media {
5
    display: flex;
6
    align-items: flex-start;
7
    background: #F6F3EB;
8
    padding: 1em;
9
    border-radius: 3px;
10
    max-width: 24em;
11
  }
12
  .media-object {
13
    margin-left: 1em;
14
    order: 1;
15
  }
16
  .media-body {
17
    flex: 1;
18
  }
19
  .media-heading {
20
    margin: 0 0 .5em;
21
  }
22
</style>
23
<div class="media">
24
  <img class="media-object" src="/pix/samples/8s.jpg" alt="Sample photo">
25
  <div class="media-body">
26
    <h3 class="media-heading">Organically Synthesized</h3>
27
    <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
28
  </div>
29
</div>