Problem mit "order-md-last" und "order-md-first"

[Rolf B]

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