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

Susy Next content Mobile to Desktop 布局顺序

Susy Next content Mobile to Desktop layout order

css

sass

grid-layout

susy-compass

susy