부트 스트랩 그리드 레이아웃 - 모바일보기에서 블록 이동

Question

모바일 및 데스크톱보기에서 모든 것을 정확하게 움직이는 일반 그리드가 있습니다.

하지만 모바일보기에서 이미지 위에 내 제목을 옮기고 싶습니다. 어떻게하면 블록을 중첩시킬 수 있을까요?

는

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      <div class="image"> 
       <img src="http://placehold.it/350x150" /> 
      </div> 
     </div> 
     <div class="col-sm-8"><h1>Lorem ipsum dolor sit amet</h1> 
      <div class="row"> 
       <div class="col-sm-12">Lorem ipsum dolor sit amet...</div> 
      </div> 
     </div> 
    </div> 
</div> 

데모 : 당신은 작은 pull-left 및 pull-right 및 img-responsive하여이 작업을 수행 할 수 있습니다 http://www.bootply.com/d9WbmWJCGv

Answer 1

이미지 중복을 방지 할 수 있습니다. Bootply에서

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-8 pull-right"> 
     <h1>Lorem Ipsum...</h1> 
    </div> 

    <div class="col-xs-12 col-sm-4"> 
     <img src="http://placehold.it/350x150" class="image img-responsive"> 
    </div> 

    <div class="col-xs-12 col-sm-8 pull-right"> 
     <p>Sed ut perspiciatis unde omnis...</p> 
    </div> 
    </div> 
</div> 

Bootply Example

, 나 또한 무슨 일이 일어나고 있는지 볼 수 있도록하기 위해 CSS를 시트에, .blue, .green을 .red 덧붙였다. 그냥 un-x'd해야합니다.