Bootstrap Reorder Spalten bei der Größenanpassung

Question

die meisten meiner Codierung Probleme sind in der Regel sehr einfach gelöst durch die Suche hier (daher ist dies meine erste Post), aber für diese eine ich kann einfach keine Antwort finden.

Ich habe ein einfaches Bootstrap-Gitter mit den W3-Tutorials gemacht.

I haben die Spalten A, B, C. Spalte A hat nur 1 Element (a Google Map), Spalten B und C 4 Reihen jeweils (wir sie B1-B4 bezeichnen und C1-C4):

What I have made (large screen)

Wenn ich die Größe des Browserfensters so ändere, dass es zu einem Bildschirm mit mobiler Größe wird, wird nur 1 Spalte in der Reihenfolge A, B1-B4, C1-C4 angezeigt.

What I get when I re-size

Was ich will, ist es die Spalten A neu zu ordnen, B1, C1, B2, C2, ..., B4, C4

What I want when I re-size

Wenn jemand die Lösung, oder kann mich in die richtige Richtung zeigen, wäre ich sehr dankbar.

Vielen Dank im Voraus.

Answer 1

Sie können die Spalten in reinem Bootstrap 3 nicht neu anordnen, ohne ein Minimum an Javascript zu verwenden.

Eine Abhilfe könnte ausgeblendeten Spalten auf Kosten unter Verwendung Ihrer Daten zweimal zu enthalten hidden-sm haben, hidden-md, hidden-lg und hidden-xs Klassen Spalten ausblenden nach dem Gerät as explained here.

Answer 2

Complete Flexbox Guide

können Sie Flexbox Bestellung verwenden, um die Reihenfolge der Kinder Elemente einstellen, wie Sie wollen. Wenn Sie also A, B1, C1, B2, C2 möchten, können Sie A auf 1, B1 auf 2, C1 auf 3 und so weiter einstellen.

Nehmen wir an, Sie hätten eine unbekannte/unendliche Anzahl von Elementen für B oder C. Sie könnten B und C in einen Flex-Container einpacken und die Reihenfolge dort festlegen und dann die Reihenfolge für einzelne Elemente festlegen .

Noch besser, beginnen Sie mit CSS Grid, dem Nachfolger von flexbox. Ich habe nicht allzu viel Erfahrung mit CSS Grid, aber es sieht so aus, als ob Sie die Reihenfolge definieren können, genau wie bei flexbox.

CSS Grid by Example - Mozilla Developer Network