Die Antworten hier funktionieren nur für 2 Zellen, aber sobald diese Spalten mehr enthalten, kann dies zu einer etwas höheren Komplexität führen. Ich glaube, ich habe eine verallgemeinerte Lösung für eine beliebige Anzahl von Zellen in mehreren Spalten gefunden.
Tore
Holen Sie sich eine vertikale Folge von Tags auf Mobilgeräten, um sich in der Reihenfolge anzuordnen, die das Design auf dem Tablet / Desktop erfordert. In diesem konkreten Beispiel muss ein Tag früher als normalerweise und ein anderes später als normalerweise in den Flow eintreten.
Handy, Mobiltelefon
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
Tablet +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Die Überschrift muss also direkt auf Tablet + gemischt werden, und technisch gesehen auch absteigend - sie befindet sich über dem Beschriftungs-Tag, das auf dem Handy davor steht. Sie werden gleich sehen, dass 4 Untertitel ebenfalls in Schwierigkeiten sind.
Nehmen wir an, jede Zelle kann unterschiedlich hoch sein und muss mit der nächsten Zelle von oben nach unten bündig sein (um schwache Tricks wie eine Tabelle auszuschließen).
Wie bei allen Bootstrap Grid-Problemen besteht Schritt 1 darin, zu erkennen, dass der HTML-Code auf der Seite in mobiler Reihenfolge (1 2 3 4 5) vorliegen muss. Bestimmen Sie dann, wie Sie Tablet / Desktop dazu bringen, sich auf diese Weise neu zu ordnen - idealerweise ohne Javascript.
Die Lösung zu erhalten , 1 headlineund 3 qtyauf der rechten Seite nicht links zu sitzen , ist einfach gesetzt , sie beide pull-right. Dies gilt für CSS float: right, dh sie finden den ersten offenen Bereich, den sie rechts finden. Sie können sich vorstellen, dass der CSS-Prozessor des Browsers in der folgenden Reihenfolge arbeitet: 1 passt in die rechte obere Ecke. 2 ist die nächste und ist regulär ( float: left), also geht es zur oberen linken Ecke. Dann 3, was float: rightso ist, dass es unter 1 springt.
Aber diese Lösung war nicht genug für 4 caption; weil die rechten 2 Zellen 2 imagelinks so kurz sind, sind sie tendenziell länger als die beiden zusammen. Bootstrap Grid ist ein besserer Schwimmer Hack Bedeutung 4 caption ist float: left. Mit 2 imageso viel Platz auf der linken Seite,4 caption versucht in den nächsten verfügbaren Raum passen - oft die rechte Spalte, nicht der linken Seite , wo wir es wollten.
Die Lösung hier (und allgemeiner für jedes Problem wie dieses) bestand darin, ein auf Mobilgeräten verstecktes Hack-Tag hinzuzufügen, das auf Tablet + vorhanden ist, um Untertitel herauszuschieben, das dann mit einem negativen Rand verdeckt wird - wie folgt:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 caption][6 desc ^^^]
[ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
CSS:
#hack { height: 50px; }
@media (min-width: @screen-sm) {
#desc { margin-top: -50px; }
}
Die allgemeine Lösung besteht darin, Hack-Tags hinzuzufügen, die auf Mobilgeräten verschwinden können. Auf Tablet + ermöglichen die Hack-Tags, dass angezeigte Tags früher oder später im Flow angezeigt werden, und werden dann nach oben oder unten gezogen, um diese Hack-Tags zu verdecken.
Hinweis: Ich habe für das einfache Beispiel in der verknüpften jsfiddle feste Höhen verwendet, aber der tatsächliche Inhalt der Website, an dem ich gearbeitet habe, variiert in der Höhe in allen 5 Tags. Es wird ordnungsgemäß mit relativ großer Abweichung in den Tag-Höhen gerendert, insbesondere in Bild und Bild.
Hinweis 2: Abhängig von Ihrem Layout haben Sie möglicherweise eine ausreichend konsistente Spaltenreihenfolge auf Tablet + (oder größeren Auflösungen), sodass Sie die Verwendung von Hack-Tags vermeiden können, indem Sie margin-bottomstattdessen Folgendes verwenden:
Hinweis 3: Dies verwendet Bootstrap 3. Bootstrap 4 verwendet einen anderen Rastersatz und funktioniert mit diesen Beispielen nicht.
http://jsfiddle.net/b9chris/52VtD/16632/