3列流体布局，中心对齐文本

Question

我试图在CSS中构建以下布局，但真的很难弄清楚如何做到这一点。它是一个简单的3列布局，但所有列都可以包含可能更改的内容，因此它们不能具有固定的宽度。

问题在于，中间列中的HEADING文本应始终与页面中间对齐（如示例A和B中所示）。

当视口宽度太小而无法容纳一行上的所有文本时，我还需要它进行换行（例C）。

任何想法如何实现这一目标？我已经创建了一个简单的codepen作为起点，如果它有帮助：https://codepen.io/anon/pen/mXJqgM

CSS:
.centre-of-page {
  border-left:#333 1px dashed;
  height:100%;
  width:1px;
  position:absolute;
  left:50%;
  margin-left:1px
}

.row {
  font-size:20px;
  font-family:sans-serif;
  display:flex;
  justify-content:space-between;
}

.col1 {
  background-color:green;
}

.col2 {
  background-color:yellow;
}

.col3 {
  background-color:teal;
}


HTML:
<div class="centre-of-page"></div>

<div class="row">
  <div class="col1">Some flexible content</div>
  <div class="col2">This is the page heading</div>
  <div class="col3">Some really, really long content</div>
</div>