CSS Bootstrap - Frage zu speziellem Layout

[felsi]

Hallo,

ich bin, wie in meinem vorherigen Thread erwähnt, zur Zeit dabei mir Bootstrap anzueignen. Klappt auch sehr gut. Nun scheitere ich allerdings am Aufbau eines speziellen Layouts. Und zwar folgendes.

Die Ausgangsposition ist ja problemlos machbar:

<section id="teaser">
		<div class="container">
			<div class="row">
				<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-6">
					<p>Text</p>
				</div>
				<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 ">
					<img class="img-fluid">
					<img class="img-fluid">
				</div>
			</div>
		</div>
	</section>

Allerdings scheitere ich ab der Größe col-md-12. Ab hier möchte ich das folgende Layout:



Das bekomme ich einfach nicht so hin. Schade ist, dass es per CSS Grid ein Kinderspiel ist, mit dem Flexbox-System von Bootstrap scheint es aber sehr schwierig zu sein. Oder weiß jemand eine einfache Lösung?

Danke

 

[marcOcram]

Graue Erinnerung: War es nicht so, dass Bootstrap maximal 12 Spalten nutzen kann? Also die Summe aller Spalten darf 12 nicht übersteigen. Du müsstest quasi die Größen deiner Spalten alle durch 2 teilen.

EDIT:

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.

https://getbootstrap.com/docs/4.0/layout/grid/

 

[Faust2011]

Kennst Du das Prinzip des spannings? Damit kannst Du mehrere der 12 Spalten (worauf das Bootstrap-Layout basiert) zu einer virtuellen Spalte zusammenfassen.

Link dazu: Bootstrap grids mit Column-spanning

 

[nichtsooft]

<!-- START: DEIN ARBEITSBEREICH -->
<div id="DeinArbeitsbereich">
	<div class="row">
		<div class="col-md-12">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<img class="img-responsive" src="https://picsum.photos/600/600?image=184">
		</div>
		<div class="col-md-6">
			<img class="img-responsive" src="https://picsum.photos/600/600?image=128">
		</div>
	</div>
</div>
<!-- END: DEIN ARBEITSBEREICH -->

 

[felsi]

Danke euch, aber ich glaube, ich habe mich missverständlich ausgedrückt.

Die beiden Layouts einzeln zu erstellen ist ja kein Problem. Mir geht es jedoch darum, dass das Design über 960px (lg) wie auf Bild 1 sein soll. Und unter 960px (md) wie auf Bild 2.

Die beiden Bilder (gelb) schieben sich also nach unten.

Edit: Geht wahrscheinlich nur über ein media query und dann eben die beiden Layouts einzeln. Oder?

 

[nichtsooft]

Axxoo...:

<!-- START: DEIN ARBEITSBEREICH -->
<div id="DeinArbeitsbereich">
	<div class="col-xs-12 col-sm-12 col-md-6">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
	</div>
	<div class="col-xs-12 col-sm-12 col-md-6">
		<div class="col-xs-6 col-sm-6 col-md-12">
			<img class="img-responsive" src="https://picsum.photos/600/600?image=184">
		</div>
		<div class="col-xs-6 col-sm-6 col-md-12">
			<img class="img-responsive" src="https://picsum.photos/600/600?image=128">
		</div>
	</div>
</div>
<!-- END: DEIN ARBEITSBEREICH -->

 

[felsi]

Danke dir, aber irgendwie ist das auch nicht richtig.

 

[ayngush]

ja...

<div class="row">
	<div class="col-12 col-md-6">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
	</div>
	<div class="col-12 col-md-6">
        <div class="row">
            <div class="col-6 col-md-12">
                <img class="img-responsive" width="100%" src="https://picsum.photos/600/600?image=184">
            </div>
            <div class="col-6 col-md-12">
                <img class="img-responsive" width="100%" src="https://picsum.photos/600/600?image=128">
            </div>
        </div>
	</div>
</div>

Edit: Wegen lernen und so: Der Trick ist dabei die class="row"-Flexbox-Container zu verschachteln.
Edit2: Bootstrap 4 Syntax und so...

 

[felsi]

Danke, das funktioniert. Aber so richtig überzeugt es mich nicht. Die beiden Bilder auf der rechten Seite haben z.B. unschönen Platz unten, wenn die linke Spalte zu hoch wird.

Mit CSS Grid ist das viel viel besser. Wahrscheinlich werde ich für solche Layouts auch zukünftig CSS Grid nutzen und das Bootstrap nur als Fallback nutzen.

 

[ayngush]

Rastergrafiken sind halt keine unendlich flexiblen Objekte...
Verstehe dein Problem nicht so richtig.