Neat 2.0 in combination with Flexbox to align middle

Question

I'm trying to use Neat 2.0 (to handle horizontal alignments) along with Flexbox (to handle vertical alignments).

What I'm trying to achieve is the middle content next to the image, followed by the next row. However, for some reason, everything gets put on the same row when I add display: flex.

What am I doing incorrectly?

HTML (Slim)

.container
  - 3.times do
    .col middle
  .col--image 
    img src='//placehold.it/700'
  - 3.times do
    .col next row

SCSS

@import "neat@2.*";

.container {
    @include grid-container;
    @include grid-visual; /* temp guide */
    max-width: 600px;
    margin: 0 auto;
    display: flex; /* adding this wrecks things */
    align-items: center;
}

.col {
  @include grid-column(2);
}

.col--image {
  @include grid-column(6);

  img {
    width: 100%;
    max-width: 100%;    
  }
}

I have an example codepen too.

Answer 1

For the next row to actually wrap, you need to add flex-wrap: wrap

Updated codepen

.container {
    @include grid-container;
    @include grid-visual;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;                      /* added property */
    align-items: center;
}