Преобразование таблиц при изменении размера экрана

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 может измениться для каждой ширины, которую вы хотите, сколько угодно.