switching stack order of floats with flex

HTML

<div class="wrapper">
    <div class="pink">
    </div>
    <div class="blue">
    </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.pink {
    background: pink;
    width: 50%;
    height: 300px;
}

.blue {
    background: blue;
    width: 50%;
    height: 300px;
}

@media screen and (max-width:800px) {
    .pink {
        order: 2;
        width: 100%;
    }

    .blue {
        order: 1;
        width: 100%;
    }
}