부트 스트랩 3 : 푸시 풀을 사용하여 콘텐츠 아래 왼쪽 사이드 바 드롭을 떨어 뜨리는 방법

Question

부트 스트랩 3을 사용 중이며 휴대 기기에서 모든 div (세로 막대 & 콘텐츠)를 세로로 쌓고 왼쪽 사이드 바를 모바일 (xs) 기기의 기본 컨테이너 (현재 왼쪽 사이드 바 오른쪽). 상기이

<div class="container"> 
<div class="row"> 
    <div class="col-sm-3 col-xs-push-9"> Sidebar</div> 
    <div class="col-sm-9 col-xs-pull-3"> Main Container</div> 
</div> 

문제들이 대형 (lg) 배지 (md) 및 (sm) 장치에 역순으로 나타나는 주요 컨테이너 사이드 바 col-xs-push-9 및 col-xs-pull-3를 사용한다는 것이다 것처럼 HTML이 보인다. 주문을 취소하고 싶지 않지만 여분의 소형 모바일 기기의 메인 컨테이너 아래에 왼쪽 사이드 바를두고 싶습니다.

JS/jQuery 솔루션이 아닌 부트 스트랩 솔루션을 원합니다.

Pls 도움.

감사

Answer 1

는 "모바일 최초의"사용 후, 먼저 원하는 모바일 순서대로 열을 레이아웃 생각하는 경우 푸시/

<div class="container"> 
<div class="row"> 
    <div class="col-sm-9 col-sm-push-3"> Main Container</div> 
    <div class="col-sm-3 col-sm-pull-9"> Sidebar</div> 
</div> 
</div> 

http://codeply.com/go/8g4UL0J43K

Answer 2

부트 스트랩 작은 그리드 설정 속성에서 큰 그리드 속성을 상속 DK. 따라서이 같은, SM을 풀을 설정하고 그리드 0으로 XS보다 큰 밀어 있습니다

<div class="container"> 
<div class="row"> 
    <div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div> 
    <div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div> 
</div> 
</div>