css Positionseinstellung von Responsive Inhalt

Question

Ich versuche eine responsive Website mit mehreren Spalten von Inhaltsfeldern zu machen.

Jede Inhaltsbox enthält ein Foto, einen Titel und eine Beschriftung.

kurz sein, ich möchte, dass jeder von ihnen in diesem Format http://i.stack.imgur.com/ST9pD.png

[X] angezeigt werden: Bild
ABC: Titel
xxx: Beschreibung

Um festzulegen, möchte ich die Titel und Titel werden in der Webansicht einzeln angezeigt.

Während die Beschriftung wird in der mobilen Ansicht verstecken, und der Titel wird oben auf dem Foto sein.

Beachten Sie, dass die Länge des Titels variieren und sehr lang werden kann, die mehrere Zeilen dauert. wie folgt aus: i.stack.imgur.com/ejElB.png (sorry nicht genug Ruf mehr als 2 Links posten)

i tagelang versucht haben,
kann ich nur erreichen, was ich in der mobilen wollen Version, die ich meinen Titel an den unteren Rand des Fotos kleben.
Allerdings kann ich nicht herausfinden, wie man die Position von Titel/Capion Div anpassen kann, um sie in der Webansicht korrekt anzuzeigen.

Was ich bisher getan: (die mobile Ansicht erfolgreich abgeschlossen wurde, stellen Sie die Fenster, um zu sehen) https://fiddle.jshell.net/1esew8dj/1/

ich die Materialien selbst die ganze Zeit gelernt, so traurig, wenn es Standard ist ausgeschaltet.

Answer 1

Ihr Code ist bereits ziemlich weit beim Erreichen Ihres Ziels. Fügen Sie einfach einen zweiten Teil mit dem Titel außerhalb der Bildbox hinzu, der nur angezeigt wird, wenn er nicht mobil ist, und den ursprünglichen Titel ausblenden.

Wie this (ich habe nur eine Box)

UPDATE:

Es kann tatsächlich viel einfacher gemacht werden, indem die textBox außerhalb des Imageframe platzieren und es im Inneren, wenn Mobil platzieren, mit absoluten Positionierung. Wie this