Tabellen transformieren, wenn sich die Bildschirmgröße ändert

Question

Ich habe 3 Datenspalten mit je 2 Zeilen. Ich würde gerne 3x2 Tabelle in 1x6 Tabelle umwandeln, wenn die Breite des Bildschirms kleiner als ein Wert ist. Irgendeine Idee, wie man das erreicht?

Meine Spalte hat die folgende Struktur:

<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

Dies würde sicherlich CSS-Medienabfragen beinhalten, mit denen Sie eben dies zu tun. Sie können sogar mehrere Unterbrechungsbreiten festlegen, in denen sich Ihr CSS für jede gewünschte Breite ändern kann, so viele Sie möchten.