CSS Bootstrap v4 - Grid im Responsive-Design anpassen

[Dsimon24]

Hallo zusammen,

ich erstelle gerade eine einfache Website mit HTML und CSS (hauptsächlich).

Folgendes Problem:
Mittels folgenden Code habe ich einen rechten und einen linken Seitenbereich:

<div class="container">
    <div class="row row-cols-2">
        <div class="col">
            <div style="text-align:center;">
                <h2>Wir helfen mit!</h2>
                <h2>Kostenlos!</h2>
            </div>
        </div>
        <div class="col">
            <img src="img/beispiel_foto_klein.png" alt="Beispielfoto" width="80%">
        </div>
    </div>
</div>

Wenn ich die Seite auf dem Smartphone öffne, möchte ich aber nur einen
Bereich haben - auf den rechten Bereich (da ist ein Bild drin) würde ich
gerne verzichten. Wie kann ich das am besten realisieren?

VG

 

[tconex]

Schau dir dazu doch den Abschnitt der Doku an:
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Ich denke das sagt und bring mehr als wenn einer von uns versucht es zu erklären.

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div style="text-align:center;">
                <h2>Wir helfen mit!</h2>
                <h2>Kostenlos!</h2>
            </div>
        </div>
        <div class="col-md-2 d-none d-lg-block">
            <img src="img/beispiel_foto_klein.png" alt="Beispielfoto" width="80%">
        </div>
    </div>
</div>

Könnte dann evtl so aussehen, ich hab es aber nicht getestet.
Die geänderten Zeilen sind 2, 3 und 9.

 

[burnt-phaw]

Du kannst folgende Klassen dem Div hinzufügen. Wähle einfach die richtigen für Deinen Einsatzzweck aus.

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

 

[tconex]

Du kannst folgende Klassen dem Div hinzufügen. Wähle einfach die richtigen für Deinen Einsatzzweck aus.

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Da hast du natürlich recht, ich bin nicht auf das 'verzichten' und mehr auf das generell nicht ganz passende Grid Layout eingegangen, ich nehme das oben in meinen Vorschlag mit auf.