I'm trying to achieve the following with `flex-direction: column`:

```
.page
---------------------
| H1                |
|---------|---------|
|  DIV 1  |  DIV 3  |
|         |---------|
|---------|  DIV 4  |
|  DIV 2  |         |
|         |         |
---------------------

```

It's important to note, that I want the markup to stay the same, so right now it looks like this:

```
<div class="page">
  <h1>Test</h1>
  <div>test</div>
  <div>test</div>
  <!-- ... -->
</div>

```

this is what I tried, but the `h1` isn't really spanning, but occupying the whole column instead:

```
.page {
  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  font-size: 12pt;
  background: #FFF;

  margin: 5mm;
  padding: 12mm;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.page > * {
}

h1 {
  width: 100%;
}

```