부트 스트랩 모바일에 쌓아 올린 대체 레이아웃

Question

이미지가 텍스트 블록 옆에 놓이는 부트 스트랩의 기본적인 반응 레이아웃이 있습니다. 첫 번째 행에서는 이미지가 왼쪽에 있고, 두 번째 행에서는 이미지가 오른쪽에 있습니다. 이렇게하면 페이지가 반복됩니다.

문제 : 사용자가 휴대 기기를 사용 중일 때 이미지가 전체 너비로 이동하지만 이미지가 오른쪽으로 정렬 된 행의 경우 이미지가 위의 텍스트가 아닌 아래에 놓입니다. 아래 코드 참조). 왜 이런 일이 벌어지고 있는지 알지만 부트 스트랩에이 문제를 해결할 수있는 클래스가 있는지 궁금해하십니까? 그것은 매우 일반적 일 것임에 틀림 없기 때문에, 여기에 제안 된 모범 사례는 무엇입니까?

<div class="container"> 
    <div class="row feature"> 
      <div class="col-sm-6 col-md-6"> 
      <img src="url" class="img-responsive"/> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div>  
    </div> 
    <div class="row feature"> 
      <div class="col-sm-6 col-md-6"> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <img src="url" class="img-responsive" /> 
      </div>  
    </div> 
</div> 

어떤 도움을 주시면 감사하겠습니다.

Answer 1

당신은 중첩 열 같은 것을 찾고 : http://getbootstrap.com/css/#grid-nesting

Bootply : http://www.bootply.com/qsdH9jr70F

이 코드를 봐 : 특별히에서 col-sm-push-6 및 col-sm-pull-6

다음은 문서입니다 HTML :

<div class="container"> 
    <div class="row feature"> 
      <div class="col-sm-6 col-md-6"> 
      <img src="url" class="img-responsive"> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div>  
    </div> 
    <div class="row feature">  
      <div class="col-sm-push-6 col-sm-6 col-md-6"> <!-- HERE --> 
      <img src="url" class="img-responsive"> 
      </div> 
      <div class="col-sm-6 col-sm-pull-6 col-md-6"> <!-- HERE --> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div> 
    </div> 
</div>