Without modifying the HTML or using some `position: absolute` hackery, is it possible to make items 6 and 7 in this list appear side-by-side on row 6?

```css
ul {
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}
li {
  width: 33%;
  border: 1px solid #ccc;
  text-align: center;
}
```

```html
<div class="flex-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>
```

<https://jsfiddle.net/511qb3py/>