Responsive Design, Bild unter dem Text bei Handy Ansicht aber im Textanfang bei Bildschirmansicht.

    Hi Leute,


    ich denke es gibt fuer mein Problem eine Loesung, aber mein CSS ist leider voellig verrostet bzw. war wohl noch nie so richtig gut. Bei einem Artikel sieht es im Moment so aus, in der Bildschirmansicht ist das Bild rechts und der Artikel umfliesst das Bild. Textanfang und Bildkante sind auf einer Hoehe. So wollen wir das auch. Die Style Angabe fuer das Bild liegt vor dem Textanfang. Baut sich das responsive Design aber fuer die Handyansicht um, wird das Bild vor dem Text gesetzt, das soll vermieden werden. Der Text soll zuerst kommen und dann das Bild. Die Loesung das Bild mit der Style Angabe nach dem Text zu schreiben wird nicht so gern gesehen, das funktioniert zwar gut fuer die Handyansicht aber im Bildschirm Modus wird dann das Bild zu tief dargestellt.


    Ich habe die wage Vorstellung das Text und Bild in je einen Container gepackt werden muessen die dann ueber CSS je nach Darstellungsvariante angesprochen werden muessen. Aber es braeuchte dann fuer mich dann doch einen mittleren Denkanstoss wie so etwas aussehen sollte.


    Kann mir vielleicht jemand einen Link zeigen der eine Box durch einen Text laufen laesst, im Sinne von oben im Text, mittig im Text, unter dem Text.


    Nur der Vollstaendigkeits halber der Quelltext.

    Und schon mal vielen Dank fuer die Muehe bis hierhin gelesen zu haben.;)


    liebe Gruesse,

    gutschy

    Und wieder die bitte um einen Link, damit wir uns das besser vorstellen können.

    Dein Problem sollte mit Flexbox lösbar sein. Hier kannst Du Containern eine andere Reihenfolge in den Mediaqueries geben.

    Auch gibt es in CSS-Frameworks wie UiKit spezielle Klassen dafür. Evtl auch in Bootstrap?


    Aber, dafür müsste man wissen, was Du einsetzt, aber ohne Link, tja....

    Hallo gutschy,


    Wenn ich mal "meinen Senf dazugeben darf":


    Vielleicht wäre es besser, das Bild nicht im Fließtext des Beitrags zu platzieren, sondern als dessen Einleitungsbild zu definieren. Mit den Web-Entwicklertools von Chrome bzw. Firefox kannst Du dann herausfinden, in welchem <div> das Bild aufgerufen wird, und dieses <div> kannst Du dann mit CSS positionieren wohin Du willst.


    Liebe Grüße, Gerry77