Susy Next content Mobile to Desktop layout order

Question

I'm having a few issues understanding how to produce the following layout using Susy Next.

I can't seem to get my head around doing this cleanly in Susy, or at all really.

The source order is the following and may not be changed.

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

The required layout is on Mobile is like this:

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

The required layout is on Desktop is like this:

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

I think this should be easy with Susy but the documentation doesn't help that much.

Thx in advacend for the Help

Answer 1

Susy Next is basically a calculator for grid-widths. When you want to reorder elements horizontally, that can be helpful - but vertical reordering is much more difficult. Susy can help with the second layout, but can't do much about the first.

Flexbox can handle both situations, though, using the order property:

.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;
}

There would be other ways to achieve the different layouts using Flexbox or CSS Grid and media-queries. This seemed like the simplest option to me.