當屏幕尺寸發生變化時變換表格

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可以根據需要改變每個寬度。