使用flexbox更改订单并允许一些项目换行？

Question

我有一个响应式布局。对于最窄的屏幕宽度，我需要切换第2和第3项的顺序。

我可以使用flexbox执行此操作，但我无法查看如何让评级和链接换行到同一行。

<header>
  <h1>Long heading text is here</h1>
  <div class="rating">Rating here</div>
  <p class="name">Someones name</p>
  <p class="link">www.someting.com</p>
</header>

header {
  margin: auto;
  border: 1px solid grey;
  width: 20%;
  display: flex;
  flex-direction: column;
}
h1 {
  order: 1;
}
.name {
  order: 2;
}
div {
  order: 3;
}
.link {
  order: 4;
}

http://codepen.io/anon/pen/EVpPPB