How to create a variable size tile layout in html

I'm experimenting to see if I can created a variable sized tile layout like the one below, without any intermediate wrapper divs.

I first tried a flexbox approach, and then discovered that flexbox isn't designed to have children move across rows, and then and a normal inline-block and float: left approach, but with the exact same problem. I haven't been able to get the blocks to move across different rows and into the space in between them.

I'm also looking for a no javascript approach.

Codepen

It's important for me to point out that I'm trying to solve this problem generally, meaning that although we could certainly find a way to create this particular layout, I'm more worried about figuring out how to create layouts of this general type, where I might not know ahead of time the exact orientation, order, or size of the tiles.

Here's the desired html (jade):

.xbox-tiles
    .tile 1 x 1
    .tile 1 x 1
    .big-tile 2 x 2
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1
    .tile 1 x 1

and sass:

@import "bourbon"

%tile
    @include flex(0)
    @include flex-basis(auto)

    // display: inline-block
    // float: left

    box-sizing: border-box


.xbox-tiles
    @include display(flex)
    @include flex-direction(column)
    @include flex-flow(wrap)

    height: 90vh
    width: 90vw

    .tile
        height: 33.33%
        width: 25%
        @extend %tile

    .big-tile
        height: 66.66%
        width: 50%
        @extend %tile