波旁威士忌 - 移动列垂直对齐？

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); 
    } 

    } 

} 

移动应该是1，2，3堆叠（已经很好）。但桌面应该是3,1,2。它们没有水平对齐。

如何通过正确的垂直对齐来实现此布局？项目1似乎在推动其他项目。

Answer 1

我能够通过在第2项替换shift(9)到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); 
    } 
}