Susy 다음 컨텐츠 모바일에서 데스크탑으로의 레이아웃 순서

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 다음에 대한 advacend에서

들으은 기본적으로 그리드 폭을위한 계산기입니다. 요소를 수평으로 재정렬하려는 경우 유용 할 수 있지만 수직 재정렬은 훨씬 어렵습니다. 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 그리드 및 미디어 쿼리를 사용하여 다른 레이아웃을 달성하기 위해 다른 방법이있을 것입니다. 이것은 나에게 가장 간단한 옵션처럼 보였다.