応答レイアウトでペアでテーブル内にセルを積み重ねる

Question

多くの例では、レスポンシブデザインでセルを1つにスタックする方法を示しています（すべてのセルにdisplay：ブロックを適用するだけで十分です）。もし私がペアでセルを積み重ねたいのであれば？のは、私は4つのセルと行を持っているとしましょう：

A B C D

で応答性のデザインで、私はこのような何かをしたい：

B

C D

私はこれに近づく可能性がどのように？

Answer 1

古いブラウザ（IE9など）をサポートする必要がない場合は、flex-basisを使用してください。

HTML

<table> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    <td>C</td> 
    <td>D</td> 
    </tr> 
</table> 

CSSここで

tr { 
    display: flex; 
    flex-wrap:wrap; 
} 

td { 
    /* makes every cell at least 34% of the total width, thus 
    preventing more than two cells from getting on the same row */ 
    flex-basis: 34%; 
} 

はjsfiddle https://jsfiddle.net/0thg1j7h/です。

フレックスのブラウザサポートのhttp://caniuse.com/#feat=flexboxを参照してください。

あなたは、このソリューションを試してみてください、古いブラウザをサポートする必要がある場合：

HTML

<table> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    </tr> 
    <tr> 
    <td>C</td> 
    <td>D</td> 
    </tr> 
</table> 

CSS

/* all cells on one line */ 
/*tr { 
    float: left; 
}*/ 

/* two cells per row */ 
/* do nothing */ 

/* one cell per row */ 
/*td { 
    display: block; 
}*/ 

は、ここでは、メディアを使用する必要がjsfiddle https://jsfiddle.net/3183v90w/1/