Susy下一個內容移動到桌面的布局順序

Question

我在理解如何使用Susy Next生成以下布局時遇到一些問題。

我似乎無法全力以赴地在Susy中做到這一點，或者根本沒有做到。

源順序如下，並且不能更改。

<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>

在Mobile上所需的布局是這樣的：

    ---------
    |   B   |
    |-------|
    |   A   |
    |-------|
    |   C   |
    |-------|
    |   D   |
    ---------

在桌面上所需的布局是這樣的：

    ------------------
    |   A   |   B   |
    |-------|-------|
    |   D   |   C   |
    -----------------

我認為Susy應該很容易，但是文檔並沒有太大幫助。

感謝您的幫助

Answer 1

Susy Next基本上是網格寬度的計算器。 當您想對元素進行水平重新排序時，這可能會有所幫助-但垂直重新排序要困難得多。 Susy可以為第二種布局提供幫助，但是對於第一種布局並不能做很多事情。

但是，Flexbox可以使用order屬性處理兩種情況：

.container {
  align-items: stretch; 
  display: flex;
  flex-direction: row-reverse; // flow right-to-left
  flex-wrap: wrap; // wrap top-to-bottom
}

.item {
  flex: 1 1 $preferred-width;
}

.b {
  order: 1;
}

.a {
  order: 2;
}

.c {
  order: 3;
}

.d {
  order: 4;
}

還有其他方法可以使用Flexbox或CSS Grid和媒體查詢來實現不同的布局。 對我來說，這似乎是最簡單的選擇。