Responsive Tisch und Stapelsäulen

Question

Um eine HTML-Komponente ansprechbar zu machen, ich möchte eine Medienabfrage verwenden, Säulenpaare in dieser Tabelle zu kombinieren:

<div style="display: table"> 
    <div style="display: table-cell">1</div> 
    <div style="display: table-cell">2</div> 
    <div style="display: table-cell">3</div> 
    <div style="display: table-cell">4</div> 
</div> 

Um es (effektiv) etwas Ähnliches wie:

<div style="display: table"> 
    <div style="display: table-cell"> 
     <div style="display: block">1</div> 
     <div style="display: block">2</div> 
    </div> 
    <div style="display: table-cell"> 
     <div style="display: block">3</div> 
     <div style="display: block">4</div> 
    </div> 
</div> 

Eine Möglichkeit, das zu tun ist, um den ersten Auszeichnungs mit zusätzlichen divs wie diese zu umgeben:

<div style="display: table"> 
    <div style="display: inline"> 
     <div style="display: table-cell">1</div> 
     <div style="display: table-cell">2</div> 
    </div> 
    <div style="display: inline"> 
     <div style="display: table-cell">3</div> 
     <div style="display: table-cell">4</div> 
    </div> 
</div> 

Ändern Sie dann die Anzeigeattribute am Haltepunkt entsprechend. Wäre das gültig? Gibt es einen besseren Weg? (Bitte beachten Sie, dass ich die Anzeige "table" und "table-cell" aus verschiedenen Gründen verwenden muss, um Dinge vertikal zu erweitern).

Answer 1

Ihre Frage ist ein wenig vage, so dass es schwierig ist, eine genaue Antwort zu geben. Ich würde empfehlen, eine JSFiddle einzurichten, damit Sie genauer sein können.

Das heißt, wenn Sie reaktionsschnelle HTML-Komponenten haben möchten, wäre die einfachste Methode wahrscheinlich, ein Grid-System wie die von Materialize und Bootstrap bereitgestellten zu verwenden.

Wenn es einen Grund gibt, warum diese für Sie nicht funktionieren, lassen Sie es mich wissen und vielleicht kann ich (oder jemand anderes) Ihnen etwas Spezifischeres liefern.