レスポンシブデザインのCSSについて質問です。

質問

レスポンシブデザインのCSSについて質問です。PCで閲覧した時は、文章を左寄せ、画像を右寄せで表示させて、スマホで閲覧した時は、文章の下に画像を配置する方法を教えて下さい。

ちなみに私の場合はPC用サイトを以下のように作成していますが、スマホではどのようなCSSにすればいいのか、わからずに悩んでいる状況です。可能であれば、簡単なサンプル・ソースを教えていただけると嬉しいです。よろしくお願いします。

■html
<p><img src="gazo.png" class="photo">このページはサンプルです。</p>

■css
.photo {
float: right;
width: 230px;
position: relative;
}

回答No.2

tkmojo

レスポンシブは記述の順番が重要ですので、元の記述をひっくり返してレイアウトしようとするのは無理があります。
テキストが先、画像が後としてhtmlを記述するのが一番正しい方法です。

【例】
<div>
<p class="text">このページはサンプルです。</p>
<p class="photo"><img src="gazo.png"></p>
</div>

.text{
width:78%;
float:left;
}

.photo{
float:right;
width:20%;
}

これなら、幅が狭くなった時にwidthとfloatを解除すれば解決できます。

力技で良ければ、現在のhtmlのまま対応する事も出来なくはないです。

p{
padding-bottom:100px;（ここは画像の縦サイズ+適度な隙間）
position:relative;
}

.photo{
position:absolute;
left:0;
bottom:0;
}

こんなかんじでしょうか。
でもこのやり方を多用すると構築・管理共にめんどくさくなるのでお勧めはしませんね。

回答No.1

H240S18B73

imgをblockにしちゃえばOK

@media(max-width:720px){
.photo{display:block;float:none;}
}