HTML/CSS Bootstrap zwei spalten mehrere Reihen

[Bububoomt]

Ich setze mich gerade mit Bootstrap auseinander und finde es inzwischen echt gut, habe aber ein kleines Problem, wo ich nicht weiter komme.

Ich möchte etwas in zwei Spalten darstellen, und dann in mehreren Reihen.

Im Grunde ist es

Version 1 | Version 2
Bild1|Bild2
Text1|text2
bild3|billd4
Hier könnte ein deutlich längerer text |kürzerer Text
stehen der auch mal mehr Zeilen hat.

Eine Spalte besteht eigentlich immer aus Bild+ Text (Habs hier nicht geschafft darzustellen)
Die Bilder sollen immer auf einer Ebene beginnen.
Das bekomme ich hin, jedoch muss es auf kleineren Geräten dann so sein, das erst die linke Spalte ist und dann die rechte.

Entweder bekomme ich die eine oder die andere Variante hin.
Wenn es gleich Groß ist, dann habe ich aber auf dem Smartphone es kreuz und quer.

Ist das überhaupt möglich?

 

[jo_237]

Hi,

deine Beschreibung des Soll-Verhaltens auf mobilen Geräten ist semantisch nicht eindeutig, deswegen könnte ich jetzt nur mutmaßen, welches Verhalten das von dir gewünschte ist.

Wenn du dir die Mühe machst, das Verhalten schematisch eindeutig für Desktop und Mobile zu skizzieren (Paint), ist es gut möglich, dass ich mir die Mühe machen, dir bei der Umsetzung zu helfen.

Abgesehen davon, da du beide Varianten losgelöst voneinander implementieren konntest, kannst du als Lösung natürlich auch zwischen diesen Varianten mit einem Media Query switchen, die SASS / LESS Mixins von Bootstrap sind hier dein Freund. Es würde der Anzahl an Antworten auf deinen Beitrag sicherlich auch nicht abträglich sein, wenn du die beiden Varianten, die du bereits implementiert hast, hier veröffentlichst.

BTW: Reden wir hier von Bootstrap 3, 4 oder gar 2?

Viele Grüße.

 

[Bububoomt]

welche Version kann ich gar nicht sagen, habe dies genommen: https://www.blank.vc/de/
Wußte gar nicht das es ne 4er gibt, dachte 3er ist die neueste.

Ich glaube ala Excel sollte es klar sein:

Auf großen Geräten wobei A1 und B1, A2 und B2, A3 und B3 gleich groß sein sollen.

Überschrift A| Überschrift B
A1|B1
A2|B2
A3|B3

Auf kleinen Geräten soll dann zu sehen sein

Überschrift A
A1
A2
A3
Überschrift B
B1
B2
B3

bekomme Variante Groß hin das A und B gleich hoch sind, dann habe ich aber Mobil

Überschrift A
Überschrift B
A1
B1
A2
B2
A3
B3

 

[jo_237]

Okay, ich sehe die Problematik. Ad-hoc fällt mir keine Möglichkeit ein, das elegant mit dem Bootstrap Grid zu lösen.

Mit Flexbox geht es dafür umso leichter.

 

[Bububoomt]

Ok, muss ich mir mal anschauen.

 

[Maddin]

Die Anfrage ist zwar schon alt, allerdings ist das eigentlich total easy:

<div class="row">
    <div class="col-md-6">
        <div class="col-xs-12">Überschrift A</div>
        <div class="col-xs-12">A1</div>
    </div>
    <div class="col-md-6">
        <div class="col-xs-12">Überschrift B</div>
        <div class="col-xs-12">B1</div>
    </div>
</div>

https://jsfiddle.net/DTcHh/18584/

 

[jo_237]

Die Anfrage ist zwar schon alt, allerdings ist das eigentlich total easy:
[...]

Leider nein, dann sind die jeweiligen Spalten nicht gleich hoch. Deswegen der Vorschlag mit Flexbox.

 

[Smssam]

[...] Deswegen der Vorschlag mit Flexbox.

Ein nützliches Tool bezüglich der Cross-Browser-Compatibility, wenn man Flexbox nutzt: Autoprefixer ;-)

 

[Maddin]

Leider nein, dann sind die jeweiligen Spalten nicht gleich hoch. Deswegen der Vorschlag mit Flexbox.

Oh, das muss ich überlesen haben. Das stimmt, gleich hoch werden sie so nicht. Lediglich die Reihenfolge wäre hier wie gewünscht

 

[Bububoomt]

also ich musste in der tat flexbox dafür nutzen, wunderte mich, dass so was in bootstrap nicht mit umgesetzt ist, wäre doch eigentlich möglich das dort mit zu integrieren.