レスポンシブコンテンツのCSSの位置設定

Question

私は、複数のコンテンツボックスの列を持つ反応性の高いウェブサイトを作ろうとしています。

各コンテンツボックスには、写真、タイトル、キャプションが含まれています。

短いことが、私はそれらのそれぞれが、この形式 http://i.stack.imgur.com/ST9pD.png

に表示する[X]：画像
ABC：タイトル
XXX：キャプション

を指定するには、私が欲しいですタイトルとキャプションをWebビューで1つずつ表示します。

キャプションはモバイルビューで非表示になり、タイトルは写真の上に表示されます。

Titleの長さは、複数の行を取るためには、長さが異なり、非常に長くなることに注意してください。このような ：i.stack.imgur.com/ejElB.png（申し訳ありません十分な評判が2つの以上のリンクを投稿しない）

私は日のために試してみました

、
私は唯一の私は、モバイルで欲しいものを達成することができます私はタイトルを写真の底に貼り付けています。
しかし、タイトル/キャプションdivの位置をWebビューで適切に表示する方法を理解することはできません。

は私がこれまでに行って何を：それは標準オフになっている場合はとても残念、https://fiddle.jshell.net/1esew8dj/1/

私は詰め込むのすべての時間を自分自身のことを学びました（モバイルビューが正常に終了しました、表示するには、ウィンドウを調整します）。

Answer 1

あなたのコードはすでにあなたの目標を達成するのにかなり遠いです。モバイルではないときに表示される画像ボックスの外にタイトルを持つ2番目のdivを追加して元のタイトルを隠すだけです。

UPDATE（私は1つのボックスだけをしました）thisのように：それは実際には絶対使用して、画像フレームの外にテキストボックスを配置し、そして時にモバイルの内部に置くことによって、より簡単に行うことができます

ポジショニング。 Like this