Wie erzwinge ich den richtigen sechsspaltigen DIV, um in RWD an der Spitze zu bleiben?

Question

Ich verwende ein benutzerdefinierten 12-Stützenraster und eine Reihe wie gegeben:

<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> 

Ich versuche, dieses Verhalten zu erhalten: Auf mittlere und kleinen Geräten jeden Block wird 12- Spaltenbreite, aber standardmäßig #the-violet fällt unter #the-pink. Ich möchte das Gegenteil, das ist #the-violet über #the-pink.

Mein aktueller (vereinfacht) SCCS ist:

.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%; 
    } 
} 

Ich gehe davon aus clearfix und respond-to Mixins sind bekannt.

ich gemacht habe und Ansatz mit fester Höhe meiner Reihe eine Klasse geben namens reversed wie (Fiddle):

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

Aber, würde ich gerne wissen, ob jemand diese Notwendigkeit konfrontiert, hat vor und hat ein weiterer Ansatz, um es in einem sauberen Weg zu lösen (ohne Befestigungshöhe).

Answer 1

Sie könnten float: right auf ihnen verwenden und sie in der umgekehrten Reihenfolge in der HTML schreiben.