Susy Columns - Stacking Mobile

Question

好吧，我是Susy的新手，我正在嘗試做一些可能非常簡單的事情。在大屏幕上，我有兩列並排| A | B |。當我將瀏覽器縮小到手機尺寸時，它會將列A堆疊在B上。

我會如何在A上製作B堆棧？我看遍了所有的地方，我似乎無法找到佈局的母親負載。我可以整天閱讀文檔，但是，我是一個視覺的人。有沒有一個地方可以下載一些示例Susy網格來混淆設置來學習？

我意識到這是一個非常新手的帖子，但是，我必須從某個地方開始。

謝謝！

Answer 1

最簡單的方法就是改變你的HTML元素的源順序：

<div class="b">column B</div> 
<div class="a">column A</div> 

如果b至上的標記，它會自動在瀏覽器疊放。您仍然可以使用與Susy給他們以任何順序水平排列：

.a { 
    @include span(8 of 12); 
} 

.b { 
    @include span(last 4 of 12); 
} 

我不知道你的佈局，所以我只是彌補數字在那裏。 last關鍵字會將b推向右側，因此a可以填寫在左側。

你的其他選擇包括CSS Flexbox的：

Flexbox可以堆放元素以任意順序，垂直或水平。如果你想要走這個方向，你應該閱讀這樣的CSS Tricks tutorial。 Susy和flexbox可以很好地協同工作，但你必須使用susy功能而不是mixin。您可以申請與Susy功能隨時隨地爲Flexbox的期望的寬度，例如：

.b { 
    flex-basis: span(4 of 12); 
}