重新安排格箱在桌面

Question

我疊像移動下面的div：

A 
B 
C 
D 
E 

我想安排它看起來像這樣當它的桌面（忽略的間距，我只想讓他們在正確的位置第一：

 +-------------+ 
     |  B 
     | 
    C +-------------+ 
     |  D 
     | 
-------+--+----------+ 
      | 
    A  |  E 
      | 
      + 

我試着用display: flex並指定order，但我不能讓D被定位B但C權下仍然possib。 le使用flex這個？我的應用中還有neat v2。

這是我當前的代碼：

.container { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-start; 
    align-content: flex-start; 

    .C { 
    order: 1; 
    @include grid-column(2); 
    } 

    .B { 
    order: 2; 
    @include grid-column(10); 
    } 

    .A { 
    @include grid-column(7); 
    order: 3; 
    } 

    .D { 
    @include grid-column(10); 
    order: 4; 
    } 

    .E { 
    @include grid-column(5); 
    order: 5; 
    } 
} 

Answer 1

你可以只使用JavaScript來測試屏幕的尺寸。如果正在使用移動設備的尺寸，請像現在一樣顯示div。如果正在使用PC的尺寸，只需爲您的div使用類似position: absolute;的東西。我不確定是否有更簡單的解決方案，但我希望這對您有用。