Mein bootstrap Bild schneidet weiter in meinem Absatz in Handy

Question

Ich versuche, ein Bild zu erhalten, um rechts zu ziehen und Block anzuzeigen, wenn in Mobile, aber mein Bild schneidet weiter in meinen Text. Kann mir jemand helfen, herauszufinden, wie man das Bild oben erscheinen lässt, dann den Text? Hier

ist der Link: 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; 
 
    
 
    } 
 
    }