모바일 버전의 부트 스트랩 열

Question

웹 사이트를 만들 때 부트 스트랩을 사용하고 있지만 문제가 있습니다.

2 행 3 열을 만들고 화면이 모바일로 바뀌면 3 행 2 열이되고 싶습니다.

데스크톱

|A| |B| |C| 
|D| |E| |F| 

모바일

|A| |B| 
|C| |D| 
|E| |F| 

나는 그것을 할 코드 아래 사용하지만, 나는 그것을 원하는처럼 이미지가 유지되지 않습니다.

<div class="row"> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
</div> 

이미지는 사전에이

|A| |B| 
    |C| 
|D| |E| 
|F| 

감사 머물! 그림과 같이 당신은 아래의 클래스를 사용할 수 있습니다

Answer 1

이전에이 문제가 발생했습니다. 문제는 내 콘텐츠가 다른 높이였습니다. 부트 스트랩은 열을 배열하기 위해 부동 소수점을 사용하기 때문에 열 A가 열 B보다 크면 열 C는 왼쪽으로 끝날 수 없습니다.

나는 실제로 볼 수 있도록 코드 페인에 대한 링크를 포함 시켰습니다. 위 두 행은 위 코드와 똑같습니다. 아래 두 행은 다른 div와 다른 높이의 div를 보여줍니다.

http://codepen.io/egerrard/pen/PGRQYK

모든 콘텐츠에 대한 최대 높이로 된 div의 높이를 설정하는 것위한 솔루션입니다. 예 :

.maxHeightDiv { 
    height: 200px; 
} 

너비가 서로 다른 경우 높이를 설정해야 할 것입니다. 조금 짜증나지만 이것은 부트 스트랩 플로트 시스템의주의 사항입니다.

Answer 2

...

1. col-xs-2 - 두 개의 열 것 XS는 장치 - 만에 (모바일)
2. col-md-3 - 다른 모든 장치 모바일에 3 열 것

<div class="row"> <div class="col-xs-2 col-md-3">Content</div> .... </div> js를 사용하지 않고는 행을 변경할 수 없습니다. 또한 모바일에서는 정말 중요합니까 ...?