ブートストラップに小さな浮動小数点表示

Question

私はいくつかの段落テキストの左に浮かべるように画像を取得しようとしていますが、解像度が500px以下になると、画像は反応して上（幅100％）を満たし、テキストは完全に下に。

The code I have does this:

それは、より高い解像度で動作しますが、小さなディスプレイで、青い楕円内のテキストは非常に小さくなります。

私はブートストラップを使用しています。

私は後にどのように効果を出すのですか？

おかげ

#arttopcont:before { 
    content: ' '; 
    display: table; 
    min-width: 767px; 
} 
#artimg{ 
    float: left; 
    width: 300px; 
    padding-right: 20px; 
} 


<div id="arttopcont"> 
    <div id="artimg"> 
     <img src="image1.png" /> 
    </div> 

    text here 
    text here 
    text here 
    text here 
    text here 
    text here 
    text here 
    text here 
    text here 
</div> 

Answer 1

あなたはブートストラップを使用している場合は、別の画面でセクションを大きく/小さくする様々なサイジング列クラスを使用することができますcol-{xs, sm, md, lg}-#のサイズ。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-sm-6 col-xs-12"> 
      <div id="artimg"> 
       <img src="image1.png" /> 
      </div> 
     </div> 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
      text 
     </div> 
    </div> 
</div> 

（ブートストラップクラスなし）アップデート：

私が正しく理解していれば、あなたは画像が画面にその下のテキストと全幅も持っているために探しているが500pxなど未満のサイズ。メディアクエリを使用してこれを達成できます。

@media (max-width: 500px) { 
    #artimg { 
    width: 100%; 
    display: block; 
    float: none; 
    } 
} 

うまくいけば助けてください！