부트 스트랩 3 : 모바일 화면에서 누적 열 순서 변경

Question

Google이 모든 곳에서 사용하는 기능 페이지 중 하나를 만들려고합니다. 데스크톱 브라우저에서는 이미지와 텍스트를 번갈아 가며 표시합니다 (첫 번째 행은 이미지이고 텍스트이고 다음 행은 텍스트이고 그 다음 이미지입니다).

그러나 모바일 화면에서 이미지가 텍스트보다 항상 우선해야합니다 (컨텍스트를 제공하기 때문에). 여기에 그림입니다 :

나는 모바일 화면에 그 순서를 부트 스트랩의 col-md-pull 및 col-md-push 기능을 사용하려했지만 작동하지 않았다.

여기 내 코드가 있습니다. 무엇이 잘못 되었나요?

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"><img src="..."></div> 
     <div class="col-md-8">Feature 1 ...</div> 
    </div> 
    <div class="row"> 
     <div class="col-md-8 col-md-push-4">Feature 2 ...</div> 
     <div class="col-md-4 col-md-pull-4"><img src="..."></div> 
    </div> 
</div> 

Answer 1

참조하십시오이 jsfiddle

<div class="container"> 
<div class="row"> 
    <div class="col-md-4"> 
     <img data-src="holder.js/100px150?bg=F3C40F"> 
    </div> 
    <div class="col-md-8"> 
     <h1>Feature 1</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, debitis, reiciendis, repudiandae, placeat recusandae maxime fugiat explicabo voluptatem omnis commodi molestiae assumenda repellendus. Sequi, id ducimus cumque dolore ipsum beatae?</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4 col-md-push-8"> 
     <img data-src="holder.js/100px150?bg=F3C40F"> 
    </div> 
    <div class="col-md-8 col-md-pull-4"> 
     <h1>Feature 2</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, voluptatum, aut, eius, ut sunt quod quia maiores eos deleniti provident delectus dicta facere eum quasi harum esse aspernatur! Quas, cumque.</p> 
    </div>  
</div> 

로를

나는 그것이 당신의 문제를 해결할 것이라고 생각합니다.

Answer 2

두 번째 .row 내에서 HTML은 (기능이 위의 이미지 배치)의 순서를 변경 :

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <img src="http://lorempixel.com/200/200"> 
     </div> 
     <div class="col-md-8">Feature 1 ...</div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4 col-md-push-4"> 
      <img src="http://lorempixel.com/200/200"> 
     </div> 
     <div class="col-md-8 col-md-pull-4">Feature 2</div>  
    </div> 
</div> 

업데이트 예 : http://jsfiddle.net/52VtD/5839/