画面サイズが変更されたときにテーブルを変換する

Question

私は3列のデータを持ち、それぞれに2行あります。画面の幅がある値よりも小さい場合、3x2テーブルを1x6テーブルに変換するようにしたいと思います。どのようにこれを達成するための任意のアイデア？

私の列には、次の構造を有する：

<div class="one-third animate_afl"> 
    <div class="w-iconbox custom_img iconpos_left size_big type_default color_primary"> 
    <div class="w-iconbox-link" > 
     <div class="w-iconbox-icon"> 
     <i class="fa fa-"></i> 
     <img src="wp-content/uploads/2015/04/9-over.png" alt="">  
     </div> 
     <h4 class="w-iconbox-title">Title</h4> 
    </div> 
    <div class="w-iconbox-text"> 
     <p>Paragraph text.</p> 
    </div> 
    </div> 
    <div class="g-hr type_invisible"> 
    <span class="g-hr-h"> 
     <i class="fa fa-star"></i> 
    </span> 
    </div> 
    <div class="w-iconbox custom_img iconpos_left size_big type_default color_primary"> 
    <div class="w-iconbox-link"> 
     <div class="w-iconbox-icon"> 
     <i class="fa fa-"></i> 
     <img src="wp-content/uploads/2015/04/modul1-over.png" alt=""> 
     </div> 
     <h4 class="w-iconbox-title">Title 2</h4> 
    </div> 
    <div class="w-iconbox-text"> 
     <p>Paragraph text 2.</p> 
    </div> 
    </div> 
    <div class="w-iconbox custom_img iconpos_left size_big type_default color_primary"> 
    <div class="w-iconbox-text"></div> 
    </div> 
</div> 

Answer 1

これは、きっとあなたは、この非常に事を行うことができCSSメディアクエリを、伴うだろう。あなたはあなたのcssがあなたが望む幅であなたが望む幅ごとに変わることができるところに複数のブレーク幅を設定することさえできます。