부트 스트랩 3 RC1 : 열 주문

Question

두 개의 주 상자가 있습니다. 한 묶음의 패널과 두 번째, 오른쪽에 4 열 (오프셋 -1)이있는 8 열 너비 상자입니다.

작은 화면의 사이드 바 상단에 사이드 바를 밀어 넣고 싶습니다. 행운없이 col-12 col-push-12 (패널 상자) 및 col-12 col-pull-12 (사이드 바 상자)을 적용 해 보았습니다. 또한 사이드 바가 위쪽으로 밀렸을 때 사이드 바가 눈금에 "가운데 맞춤"(즉, 마치 네가 col-offset-4 col-4 인 것처럼) 표시되도록하고 싶습니다.

나는이 동작 중 일부와 관련하여 GitHub의 부트 스트랩 레포에서 약간의 움직임 (미해결 문제)을 발견했지만, 나는 단지 충돌하는 것일 수도 있습니다.

<div class="container content"> 
    <div class="row"> 
     <div class="col-lg-8 col-12"> 
      <div class="panel listing"> 
       ... 
      </div> 
     </div> 
     <div class="col-sm-4 col-sm-offset-4 col-lg-3 col-lg-offset-1 col-12"> 
      <div class="sidebar"> 
       ... 
      </div> 
     </div> 
    </div> 
</div> 

위의 "바닐라"코드는 지금의 약자과 같다 : I 모바일 및 태블릿에 위의 기사를 얻기 위해 무엇을해야합니까?

업데이트 : 허용 대답/구현 인해 더 이상 일부 커밋으로 작동 나타납니다 오늘 ("RC1은"내가 RC를이라고 부르는 아니라고 주어진!) : https://github.com/twbs/bootstrap/commits/3.0.0-wip

사람이있는 경우 업데이트 된 답변을 주시면 감사하겠습니다.

Answer 1

당신은 (부트 스트랩에는 push-12 또는 pull-12 클래스가없는) 그런 요소의 순서를 변경할 수 없습니다 그래서 당신은 대형 스크린 대신

<div class="container content"> 
    <div class="row"> 
     <div class="col-lg-3 col-lg-offset-1 col-lg-push-8 col-sm-4 col-sm-offset-4"> 
      <div class="sidebar"> 
       SIDEBAR 
      </div> 
     </div> 
     <div class="col-lg-8 col-lg-pull-4 col-sm-12"> 
      <div class="panel listing"> 
       PANEL 
      </div> 
     </div> 
    </div> 
</div> 

Demo fiddle을 컬럼 순서를 마크 업 순서를 변경하고 사용해야합니다

또한 NetDNA에서 호스팅되는 Bootstrap 3 CSS 파일이 최신 버전이 아니며 푸시/풀 클래스가 제대로 구현되지 않았기 때문에 공식 파일을 다운로드하고 CSS 코드를 복사해야했습니다. 괴롭히다 le