SOURCE

<h3>
  Basic Examples
</h3>
<div class="container">
  <div class="main">
    <div class="Media">
      <img class="Media-figure" src="./img/2.jpeg" width="100" alt="">
      <p class="Media-body">
        布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C
        提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
      </p>
    </div>
    <div class="Media">
      <img class="Media-figure" src="./img/2.jpeg" width="100" alt="">
      <p class="Media-body">
        布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C
        提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
      </p>
    </div>
  </div>
  <div class="main">
    <div class="Media">
      <img class="Media-figure secimg" src="./img/2.jpeg" width="100" alt="">
      <p class="Media-body sec">
        布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C
        提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。布局的传统解决方案，基于盒状模型，依赖
        display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C
        提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
      </p>
    </div>
  </div>
</div>
<h3>
  Non images
</h3>
<div class="container">
  <div class="Media">
    <span class="Media-figure">
    </span>
    <p class="Media-body">
      布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C
      提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
    </p>
  </div>
  <div class="Media third">
    <span class="Media-figure">
    </span>
    <p class="Media-body">
      布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C
      提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
    </p>
  </div>
</div>

.container {
  display: flex;
  align-items: flex-start;
}

.main {
  flex: 1;
  margin-right: 1em;
  align-items: flex-start;
}

.Media {
  display: flex;
  align-items: flex-start;
  background-color: #c3c3c3;
  padding: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
}

.Media-figure {
  margin-right: 1em;
}

.secimg {
  margin-left: 1em;
}

.Media-body {
  flex: 1;
  margin: 0;
}

.sec {
  order: -1;
}

.Media span {
  width: 1em;
  height: 1em;
  background: url("./img/message.png");
}

.third {
  align-items: center;
}