All the code can be found in the JS fiddle below I thought it would be easier that way. I am trying to display the Flexbox items horizontally, so that the first 8 and 4 columns are beside each other.

I then want to add the 12 on a totally new line, underneath the 8 and 4 and not beside it, extending the pages length horiztonally and having that horrible scroll.

What have I tried?

```
.container {
    display: flex; /* or inline-flex */
}

```

So the above code just makes it all go side by side, no matter how many columns you do or if it exceeds 12, I want it to work pretty much exactly like bootstraps grid system if that makes sense.

<https://jsfiddle.net/d35g2mra/1/>