Susy Следующий контент Порядок размещения с мобильного на рабочий стол

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   |
    -----------------

Я думаю, что это должно быть легко с Сьюзи, но документация не очень помогает.

Спасибо за помощь

Answer 1

Susy Next - это калькулятор ширины сетки. Если вы хотите изменить порядок элементов по горизонтали, это может быть полезно, но вертикальное изменение порядка гораздо сложнее. Сьюзи может помочь со вторым макетом, но мало что может сделать с первым.

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 и медиа-запросов. Это казалось самым простым вариантом для меня.