부트 스트랩 12 열

Question

두 개의 12 열 섹션이 있습니다. 모바일 디자인에서 섹션을 변경하고 싶습니다.

예 : 코드

< section class="col-xs-12" > 
mobile top/desktop bottom 
</ section > 
< section class="col-xs-12" > 
mobile bottom/desktop top 
</ section > 

누구나 변경 방법을 알고 있습니다.

Answer 1

미디어 쿼리와 float 속성을 사용해보십시오.

기본적으로 데스크톱 모드에서 작동하는 열 위치를 전환합니다. 화면이 모바일 인 경우 (부트 스트랩 < = 480px에 따라) 상단 col 플로트를 오른쪽으로 둡니다. 아래쪽으로 위치가 전환됩니다.

<div class="col-xs-12 myCol"> 
mobile bottom/desktop top 
</div> 
<div class="col-xs-12"> 
mobile top/desktop bottom 
</div> 

CSS :

.myCol { 
    float:right 
} 
@media screen and (min-width: 480px){ 
    .myCol{ 
    float:none 
    } 
}