내 부트 스트랩 이미지가 계속 모바일에서 단락으로 자르다.

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; 
 
    
 
    } 
 
    }