苏西 下一个内容 移动到桌面的布局顺序

Question

我在了解如何使用 Susy Next 生成以下布局时遇到了一些问题。

我似乎无法在苏西身上干净利落地做到这一点，或者真的

无法理解。

源顺序如下，不得更改。

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

移动设备上所需的布局如下所示：

    ---------
    |   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和媒体查询来实现不同的布局。这对我来说似乎是最简单的选择。