css - Susy Next content Mobile to Desktop 布局顺序

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>

需要的布局在移动端是这样的:

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