부트 스트랩의 스태킹 순서

Question

부트 스트랩의 스태킹 순서에 문제가 있습니다. 나는 비슷한 질문이 제기되었고 그것의 밀고 당기는 것이 사용되어야한다는 것을 깨닫는다. 그러나 나는 그것을 작동시킬 수 없다.

이

를 사용하여 코드 메신저입니다 :

<div class="row"> 
 
    \t <div class="col-xs-12 col-sm-6"> a </div> 
 
    \t <div class="col-xs-12"> b </div> 
 
    \t <div class="col-xs-12 col-sm-6"> c </div> 
 
</div> 
 

내가 원하는 것은위한 것입니다가, B와 C는 모바일보기 위해 서로하에 할 수 있지만, 바탕 화면보기 A의과 c는 각 사람 옆에 있어야하고 b는 그 아래에 있어야합니다.

B
C

는 C
B

Answer 1

그것은이 같은 일을하지만, 정확히 접근 것이야 ...

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

HTML :

<div class="row"> 
    <div class="col-xs-12 col-md-6"> 
    <div class="row"> 
     <div class="col-xs-12">A</div> 
     <div class="col-xs-12">B</div>  
    </div> 
    </div> 
    <div class="col-xs-12 col-md-6">C</div> 
</div> 

Answer 2

필요한 많은 HTML이 아니라, 그것은 각 열은 50 % 불과 2 열 레이아웃입니다. 중첩 된 열은 필요하지 않습니다. 중첩되지 않은 구조에서는 col-xs-12을 지정할 필요가 없습니다. 열 클래스의 최소 너비보다 작은 경우 콘텐츠를 100 % 지정해야합니다.

DEMO : http://jsbin.com/paqoke/2/edit

<div class="row"> 

     <div class="col-sm-6"> 

     <p>A</p> 

     <p>B</p> 

     </div><!--/.col-*-6--> 

     <div class="col-sm-6"> 
      C 
     </div><!--/.col-*-6--> 

    </div><!--/.row--> 

</div><!--/.container--> 

Answer 3

슬프게도, 푸시/당신이 열 뛰어 수 없기 때문에, 여기에 도움이되지 않습니다 당깁니다. 일부 콘텐츠 (이 예에서는 col-c를 속였음)를 복제하고 적절한 장치에서 부트 스트랩 hidden-xs 및 visible-xs 도우미 클래스를 사용하여 표시하거나 숨길 수 있습니다.

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 bg-success"> a </div> 
    <div class="hidden-xs col-sm-6 bg-info"> c desktop</div> 
    <div class="col-xs-12 bg-warning"> b </div> 
    <div class="visible-xs col-xs-12 bg-info"> c mobile</div> 
    </div> 
</div> 

DEMO : 다른 그리드 클래스를 선언 한 경우는 기본 xs 폭의로 또한 http://www.bootply.com/SW2ygwLVNY

주목할 필요가, 당신은 col-xs-12를 선언 할 필요가 없습니다. (즉, col-sm-6은 xs 일 때 col-xs-12로 기본 설정 됨).