響應表固定的第一列摺疊列成行

Question

我有如下的佈局的表：

 
--------------------- 
| A1 | A2 | A3 | A4 | 
--------------------- 
| B1 | B2 | B3 | B4 | 
--------------------- 

當用戶改變瀏覽器，我想在表中的右列樞轉到第二列和讓他們表現爲行。而不是他們疊加，我希望他們轉動。我發現了很多在線堆疊的例子，它確實不是我想要的。

這是我想要的輸出：

 
--------------------- 
| A1 | A2: B2  | 
| B1 | A3: B3  | 
| | A4: B4  | 
--------------------- 

這可能與媒體查詢和CSS或者我需要開始編寫JavaScript？

編輯：

我沒有提到的問題不夠清楚：該表不只是兩行，表中有多個行，用一排作爲接頭，例如：

 
--------------------- 
| A1 | A2 | A3 | A4 | 
--------------------- 
| B1 | B2 | B3 | B4 | 
--------------------- 
| C1 | C2 | C3 | C4 | 
--------------------- 
| D1 | D2 | D3 | D4 | 
--------------------- 

到

 
--------------------- 
| A1 | A2: B2  | 
| B1 | A3: B3  | 
| | A4: B4  | 
--------------------- 
| A1 | A2: C2  | 
| C1 | A3: C3  | 
| | A4: C4  | 
--------------------- 
| A1 | A2: D2  | 
| D1 | A3: D3  | 
| | A4: D4  | 
--------------------- 

謝謝

Answer 1

這裏是一個工作的jsfiddle妖strating能解決你的問題的佈局基本Flexbox的實現： Nested Flexbox column-row switch demo

.table { 
 
    width: 100%; 
 
} 
 
.table, .column, .column2 { 
 
    display: flex; 
 
} 
 
.column, .column2 { 
 
    flex-grow: 1; 
 
    flex-direction: column; 
 
} 
 
.column .cell-l1 { 
 
    padding: 10px; 
 
} 
 
.cell-l1 { 
 
    border: 1px solid teal; 
 
    box-sizing: border-box; /* aesthetic rule not necessary for solution*/ 
 
    background: white; 
 
    flex-grow: 1; 
 
} 
 
.column2 .cell-l1 { 
 
    flex-direction: row; 
 
    display: flex; 
 
} 
 
.cell-l2 { 
 
    flex-grow: 1; 
 
    padding: 10px; 
 
} 
 
.cell-l2:nth-child(2n+1) { 
 
    background-color: #DDD; /* alternating background color */ 
 
} 
 

 
@media (max-width:768px){ 
 
    .column2 .cell-l1 { 
 
    flex-direction: column;  
 
    } 
 
    .column2 { 
 
     flex-direction: row; 
 
    } 
 
}

<div class="table"> 
 
    <div class="column"> 
 
    <div class="cell-l1"> 
 
     A1 
 
    </div> 
 
    <div class="cell-l1"> 
 
     B1 
 
    </div> 
 
    </div> 
 
    <div class="column2"> 
 
    <div class="cell-l1"> 
 
     <div class="cell-l2"> 
 
     A2 
 
     </div> 
 
     <div class="cell-l2"> 
 
     A3 
 
     </div> 
 
     <div class="cell-l2"> 
 
     A4 
 
     </div> 
 
    </div> 
 
    <div class="cell-l1"> 
 
     <div class="cell-l2"> 
 
     B2 
 
     </div> 
 
     <div class="cell-l2"> 
 
     B3 
 
     </div> 
 
     <div class="cell-l2"> 
 
     B4 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>