私のブートストラップイメージは、モバイルで私の段落に切断され続ける

Question

私は、プル右に画像を取得しようとしていると、モバイルで表示ブロックをしようとしているが、誰も私が画像を上に表示し、次にテキストを表示する方法を理解できますか？ここで

はリンクです：http://o-pd.com/AP

<div class="clearfix"> 
    <img src="http://o-pd.com/AP/img/John-Abraham.jpg" alt="John Abraham" class="pull-right img-responsive gap-left" width="200" height="200"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p> 
        <br/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p> 
</div> 

Answer 1

/*we will use media query to change the direction of img*/ 
 
@media (max-width:500px){ 
 
    .pull-right{ 
 
    float:left !important; 
 
    } 
 
    p{ 
 
    clear:both; 
 
    
 
    } 
 
    }