nicht angemeldet
Problem mit "order-md-last" und "order-md-first"
MudGuard
Rolf B
Gunnar BittersmannLiebe Community
Ich habe ein Problem mit "order-md-last" und "order-md-first" Ich wollte eigentlich, dass in der Handyansicht folgende Reihenfolge erscheint:
Bild 2
Bild 1
Bild 3
Bild 4
oder wenigstens in der Senkrechte einen Abstand zwischen Bild 2 und Bild 3. Was mache ich falsch?
<!DOCTYPE html>
<html lang="de">
<head>
<title>Beispiel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/favicon.png">
<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-2 order-md-last" ><img src="images/Bild1.png"></div>
<div class="col-md-4 order-md-first" ><img src="images/Bild2.png" alt="Make up & Hair-Gutschein vorn" height="" width="100%"></div>
<div class="col-md-4"><img src="images/Bild3.png" alt="Make up & Hair-Gutschein rück" height="" width="100%"></div>
<div class="col-md-2"><img src="images/Bild4"></div>
</div>
</div>
</div>
</section>
</body>
</html>
Wäre super, wenn mir jemand helfen könnte.
Ich sag schon mal Danke!
-
Hi,
Was mache ich falsch?
Du zeigst uns das CSS nicht.
Wie sollen wir erkennen können, was falsch ist, wenn wir gar nicht wissen, was ist?
cu,
Andreas a/k/a MudGuard-
Hallo MudGuard,
das CSS kommt von Bootcrap. Die Klassennamen sind ziemlich eindeutig. Ein Bootstrapper schreibt erstmal kein eigenes CSS, sondern aktiviert nur mit Klassen das vorhandene Bootstrap-Geraffel.
Rolf
--
sumpsi - posui - obstruxi-
Hi,
das CSS kommt von Bootcrap. Die Klassennamen sind ziemlich eindeutig. Ein Bootstrapper schreibt erstmal kein eigenes CSS, sondern aktiviert nur mit Klassen das vorhandene Bootstrap-Geraffel.
das muß man aber auch erst mal wissen. Beim Dreamweaver war das damals (hach, die guten alten Zeiten …) besser, da hieß alles MM_* - das war wenigstens ein
Abschreckungs-Erkennungsmerkmal.cu,
Andreas a/k/a MudGuard-
Hallo MudGuard,
naja, es gibt auch noch einen kleinen Propheten... 🥄
<link rel="stylesheet" href="css/bootstrap.css">
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
Hallo Petra,
Was mache ich falsch?
Du verwendest Bootstrap und fragst in einem Forum, wo CSS Puristen leben 😉
Ich habe von Bootstrap keine Ahnung. Aber ein Blick ins Handbuch und die Browser-Entwicklerwerkzeuge verrät mir:
Die Klasse order-md-last wird nur aktiv, wenn der Bildschirm mindestens 768 Pixel breit ist. Auf einem schmaleren Bildschirm ist sie inaktiv.
Du möchtest aber, dass die Bilder bei einem schmalen Viewport umsortiert werden. Ich weiß nicht, ob Bootstrap das unterstützt, denn wenn diese Lib irgendwas taugt, propagiert sie den Mobile First Ansatz. D.h. Du schreibst dein Layout so, dass es für den schmalen Viewport taugt, und baust es um, wenn Du Zusatzplatz bekommst.
Bedeutet für Dich: Ordne die Bilder passend für's Handy an. Füge order-md-Klassen so hinzu, dass ab Medium-Breite die andere Reihenfolge entsteht.
Gut ist das trotzdem nicht (weil Bootstrap fix 768 Pixel als "Medium" vorgibt), aber mit Bootstrap-Mitteln wohl nicht anders machbar…
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
wenn diese Lib irgendwas taugt
Zum Layouten? 🤣 Das geht mit CSS einfacher und flexibler als mit Bootstrap.
propagiert sie den Mobile First Ansatz.
Ja, das tut sie. ☞ Breakpoints
Bedeutet für Dich: Ordne die Bilder passend für's Handy an. Füge order-md-Klassen so hinzu, dass ab Medium-Breite die andere Reihenfolge entsteht.
Oder: Füge
order-*-Klassen für schmale Viewports undorder-md-*-Klassen für breite Viewports hinzu. ☞ Beispiel🖖 Живіть довго і процвітайте
--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter-
@@Gunnar Bittersmann
Zum Layouten? 🤣 Das geht mit CSS einfacher und flexibler als mit Bootstrap.
Und so einfach geht’s mit CSS: Flexbox · Grid
CSS 1 – Bootstrap 0
🖖 Живіть довго і процвітайте
--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter
-
-
-
@@Petra T
<!DOCTYPE html> <html lang="de"> <head> <title>Beispiel</title> <meta charset="utf-8">Die Angabe der Zeichencodierung sollte als allererstes im
headstehen.<section class=""> <div class="container">Wozu zwei Elemente? Du kannst dem
section-Element die Klassecontainergeben und dasdivsparen. (Angenommen,sectionist das passende Element.)<div class="row"> <div class="col-md-12"> <div class="col-md-2 order-md-last" ><img src="images/Bild1.png"></div>Bootstrap-
colssollten Kinder vonrows sein; nicht voncols. Das<div class="col-md-12">muss weg.Dem Bild fehlt das notwendige
alt-Attribut. Für rein dekorative Bilder istalt=""zu setzen, sonst lesen Screenreader den Dateinamen vor.🖖 Живіть довго і процвітайте
--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter -
@@Petra T
Ich wollte eigentlich, dass in der Handyansicht folgende Reihenfolge erscheint:
Wenn es sich um Dekoration handelt, ist das Umsortieren mit CSS kein Problem.
Anders, wenn es sich um Inhalte handelt. Insbesondere, wenn sich darin interaktive Elemente (Links, Buttons usw.) befinden. Dann sollte die Tab-Reihenfolge bei Tastaturbedienung mit der visuellen Reihenfolge übereinstimmen. Ansonsten haben sehende Tastaturbediener ein ernsthaftes Problem.
🖖 Живіть довго і процвітайте
--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter