부트 스트랩 3 : 푸시/풀 - 버그 또는 모바일을 먼저 사용 하시겠습니까?

Question

내 col-*의 순서를 바꾸고 싶습니다. 제대로하고 있는지 확실하지 않습니다.

방금 ​​두 개의 Chars (C & D)의 순서를 변경했지만 문제가 해결되지 않았습니다. 그것 때문에 "모바일 우선" 또는 뭔가 빠졌나요?

목표 :

------------------------- 
| SIZE | ORDER | 
------------------------- 
| >= SM | A B C D | 
| < SM | A B D C | <- C & D are switching 
------------------------- 

내 첫 번째 방법과 이해 (작동하지 않는) :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6">A</div> 
 
    <div class="col-sm-6">B</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-sm-push-6">C</div> <!-- !!! --> 
 
    <div class="col-sm-6 col-sm-pull-6">D</div> 
 
    </div> 
 
</div>

두 번째 접근 방식 (작업,하지만 올바른 경우 확실) : 사전에

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6">A</div> 
 
    <div class="col-sm-6">B</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-sm-push-6">D</div> <!-- !!! --> 
 
    <div class="col-sm-6 col-sm-pull-6">C</div> 
 
    </div> 
 
</div>

감사합니다!

Answer 1

두 번째 접근 방식은 옳다. push class and pull class을 사용하면 서로 다른 위치로 이동하게된다. sm-push & sm-pull을 사용하므로 작은 장치에서만 적용됩니다. 모바일보기를 원할 경우 xs-pull and xs-push을 사용할 수 있습니다.