Susy Columns - İstifleme Mobile

Question

Tamam, Susy için yeni ve muhtemelen çok kolay bir şey yapmaya çalışıyorum. Büyük bir ekranda iki sütun yan yana | A | B | var. Tarayıcıyı bir mobil boyuta küçültdüğümde, A sütunlarının üzerindeki A sütunlarını istifler.

A'yı nasıl A yığını üzerinde yapabilirim? Her yere baktım ve düzenlerin ana yükünü bulamıyorum. Bütün gün belgelerini okuyabiliyorum ama görsel bir insanım. Bazı örnek Susy ızgaralarını, öğrenmek için ayarlarla karıştırmak için indirebileceğim bir yer var mı?

Bunun çok acemi bir mesaj olduğunu anlıyorum, ama bir yere başlamalıyım.

Teşekkürler!

Answer 1

basit seçenek HTML'nize elementlerin kaynağı sırası değiştirmektir: işaretlemesinde önce gelir

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

b, otomatik olarak tarayıcıda üst üste gruplanır. Ben senin düzenini bilmiyorum

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

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

, bu yüzden sadece orada numaralarını yapıyorum: Hala sırayla ya yatay düzenlemek için Susy kullanabilirsiniz. last anahtar kelimesi b anahtarını sağa itecektir, böylece a sola doldurabilir.

Flexbox dikey ya da yatay olarak herhangi bir sırada unsurları yığını sağlar:

Diğer seçenek CSS flexbox'a içerir. Bu yöne gitmek isterseniz, CSS Tricks tutorial gibi bir şey okumalısınız. Susy ve flexbox birlikte harika çalışıyor, ancak karışımların yerine susyeli fonksiyonları kullanmanız gerekiyor.

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