Bourbon Neat - сдвинуть столбцы для выравнивания по вертикали?

Question

Я хочу выровнять мои столбцы по-разному с их исходным кодом HTML. Я пытаюсь использовать shift(), чтобы сделать это, но у меня проблемы с выравниванием их по горизонтали.

Чтобы лучше продемонстрировать мою проблему, я ставлю этот CodePen вместе: http://codepen.io/anon/pen/gaBYJB?editors=110

HTML

<h1>Resize the browser</h1> 
<p>Mobile should be 1, 2, 3 stacked. But desktop should be 3, 1, 2. They do not align correctly horizontally.</p> 
<div class="items"> 
    <div class="item item_1">1</div> 
    <div class="item item_2">2</div> 
    <div class="item item_3">3</div> 
</div> 

SCSS

@import "bourbon"; 
@import "neat"; 

$bp: new-breakpoint(min-width 768px 12); 

body { 

    padding: 20px; 

} 

.items { 

    @include row(); 

    background: #333; 
    padding: 20px; 

} 

.item { 

    @include span-columns(12); 

    padding: 20px; 
    color: #fff; 
    font-size: 22px; 
    background: #666; 

    &_1 { 

    @include media($bp) { 
     @include span-columns(3); 
     @include shift(6); 
    } 

    } 

    &_2 { 

    @include media($bp) { 
     @include span-columns(3); 
     @include shift(9); 
    } 

    } 

    &_3 { 

    @include media($bp) { 
     @include span-columns(6); 
     @include shift(-12); 
    } 

    } 

} 

Mobile должен быть 1, 2, 3 (уже отлично). Но рабочий стол должен быть 3, 1, 2. Они не выравниваются правильно горизонтально.

Как достичь этого макета с правильным вертикальным выравниванием? Пункт 1, похоже, подталкивает остальных.

Answer 1

Я был в состоянии кодировать частичное решение путем замены shift(9) по пункту 2 к omega() смешивания, чтобы удалить правое поле (см Codepen). shift(9) не является необходимым, поскольку элемент 2 выталкивается сдвигом по пункту 1.

@include omega(); 
//@include shift(9); 

Однако Аккуратные, кажется, до сих пор есть проблемы с левым краем пункт 3 равно нулю. Поэтому лучшим решением может быть размещение столбцов 1 и 2 и сдвиг родителя и элемента 3 (см. Codepen).

.item_group { 
    @include media($bp) { 
    @include span-columns(6); 
    @include shift(6); 
} 
... 
&_1 { 
    @include media($bp) { 
    @include span-columns(3 of 6); 
    } 
} 
&_2 { 
    @include media($bp) { 
    @include span-columns(3 of 6); 
    } 
} 
&_3 { 
    @include media($bp) { 
    @include span-columns(6); 
    @include shift(-12); 
    } 
}