モバイルデバイスでラップする代わりにテキストを下にスキップする

Question

完全に検索していて、これに対して適切な解決策が見つからないようです。

ギターのウェブサイトに2つのカテゴリのブログレイアウトページがあります。イントロ記事の画像は、「float：left」に設定されています。これにより、実際に小さな画面のデバイスや、より大きな画面/反転された画面が水平モードのデバイスで動作します。

縦画面モードでは、大画面の電話画面ではテキストがイメージを奇妙な形で囲みます。ここでは、テキストが単に画像の下にスキップされた場合には好きです。あなたは、私がここで何を意味するか見ることができます：

http://www.responsinator.com/?url=http%3A%2F%2Fguitarguitar.net%2Fjoomla%2Findex.php%2Fbasic-guides

最初の例では、私が後だ効果ですが、iPhone 6とネクサス電話でラップ効果は不要です。

これをCSSで行う方法はありますか？

min-width CSSプロパティで試してみましたが、効果がありません。

Joomla vs 3.6.5を使用して、プロトスタテンプレート。私は2つのソリューションを見つけ

Answer 1

：

.pull-left.item-image { 
    float: none; /* option one */ 
    width: 100%; /* option two */ 
} 

のみfloatのみwidth（あるいはその両方）があなたの問題を解決します。しかし、これはモバイルビューだけでなく、画像にも影響することに注意してください。だからあなたは窓の幅で遊んで、変化の最大の高さを知る必要があります。 > HTTPS -

@media screen and (max-width: 450px) { 
    .pull-left.item-image { ... } 
}