트위터 부트 스트랩은 : 모바일 장치

Question

<div class="row"> 
    <div class="col-lg-7"> 
     <div>block1 with IDs and classes</div> 
     <div>block2 with IDs and classes</div> 
    </div> 
    <div class="col-lg-5"> 
     <div>block3 with IDs and classes</div> 
    </div> 
</div> 

또 다른 하나의 열, 주문 카운트에서 이동 DIV 방법은 모바일

block1 
block3 
block2 

처럼 보이게하기 위해?

P. 난 내 요청하기 전에 물론이 질문에보고했다 : 그것은 도움이되지 않습니다

SO: How do I change Bootstrap 3 column order on mobile layout?

. 또한, ID가 페이지에서 고유해야합니다으로 도움이되지 않는 다른 장소에서

<div>block2 with IDs and classes</div> 

두 블록 hidden-xs 및 visible-xs를 추가.

제안 사항? 고맙습니다. 예 :

중요 : 블록 1 이상 (높이가 크다) 키 블록 (3)이 될 수있다 (그리고있다).

Answer 1

필요가 없습니다 추가 푸시/풀을 사용합니다. 그냥 .. 큰 화면에서 오른쪽으로 떠 특별한 클래스를 생성, block 3이 다른 열보다 키가 크다 경우 ... "모바일 최초의"

<div class="row"> 
     <div class="col-lg-7"> 
      <div>block1</div> 
     </div> 
     <div class="col-lg-5"> 
      <div>block3</div> 
     </div> 
     <div class="col-lg-7"> 
      <div>block2</div> 
     </div> 
</div> 

http://www.codeply.com/go/jgvSJrMOnk

생각

@media (min-width:1200px) { 
    .pull-lg-right { 
     float:right; 
    } 
} 

Answer 2

작업이 푸시를 시도하고 당겨 할 것입니다 푸시를 사용하여 그리드의 속성을 끌어에만 작은 장치에 적용됩니다

<div class="row"> 
     <div class="col-lg-3">block1 with IDs and classes</div> 
     <div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div> 
     <div class="clearfix visible-lg-block"></div> 
     <div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div> 
    </div> 

편집 clearfix 큰 장치