How to force the right six-column DIV to stay on top in RWD?

I'm using a custom 12-column grid and given a row like:

<div class="row">
    <div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div>
    <div id="the-violet" class="lg-6 md-12 sm-12"><!-- content --></div>
</div>

I'm trying to get this behaviour: On medium and small devices each block will be 12-columns width but, by default, #the-violet will fall below #the-pink. I'd like the opposite, that's #the-violet above #the-pink.

My current (simplified) SCCS is:

.row {
    @include clearfix;
    [class*="lg-"],
    [class*="md-"],
    [class*="sm-"] {
        float: left;
    }
}
.lg-6 {
    width: 50%;
}
.md-12 {
    @include respond-to("medium") {
        width: 100%;
    }
}
.sm-12 {
    @include respond-to("small") {
        width: 100%;
    }
}

I'm assuming clearfix and respond-to mixins are well-known.

I've made and approach with fixed height giving my row a class named reversed like (Fiddle):

.reversed {
    position: relative;
    @include respond-to("small" "medium") {
        .sm-12,
        .md-12 {
            position: absolute;
            top: 0;
            &::first-child {
                top: 200px;
            }
        }
    }
}

But, I'd like to know if anyone has faced this need before and has another approach to solve it in a clean way (without fixing height).