부트 스트랩 그리드 - 먼저 열?

Question

저는 부트 스트랩에 대해 상당히 새롭고 처음에는 꽤 간단하다고 생각되는 문제가있는 작업을 경험했습니다. 그리고 아마도 Bootstrap을 충분히 경험 한 사람을위한 것일 수도 있습니다.

하나의 열 레이아웃에서 서로 위에 겹쳐 져야하는 12 열의 행을 2 열 레이아웃에서 2 x 6으로, 3 열 레이아웃에서 3 x 4로 나누면, 결과는 일반적으로 다음과 같습니다

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 

및

1 2 
3 4 
5 6 
7 8 
9 10 
11 12 

및

1 2 3 
4 5 6 
7 8 9 
10 11 12 

을 내가 원하는 무엇, howev 어, 이것이다 :

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 

및

1 7 
2 8 
3 9 
4 10 
5 11 
6 12 

및

1 5 9 
2 6 10 
3 7 11 
4 8 12 

표준 부트 스트랩 클래스와 함께이 작업을 수행 할 수있는 쉬운 방법이 있나요?

레이아웃의 예가 여기에 있습니다. http://bildarkivet.orsa.se이 사이트에서 12 개의 입력 요소는 CSS column-count 속성이있는 열로 정렬되지만 비슷한 순서 스타일을 포함 할 수 있으면 좋을 것입니다. 부트 스트랩 기반 사이트.

Answer 1

부트 스트랩의 가시성 클래스를 사용하지 않고 레이아웃을 만들 수 없습니다.

여기에 숨겨진 클래스와 보이는 클래스를 사용하여 원하는 결과를 얻으려는 경우 fiddle입니다.

<div class="col-md-6 col-lg-4"> 
    <div class="row"> 
    <div class="col-sm-12">1</div> 
    <div class="col-sm-12">2</div> 
    <div class="col-sm-12">3</div> 
    <div class="col-sm-12">4</div> 
    <div class="col-sm-12 visible-md-block">5</div> 
    <div class="col-sm-12 visible-md-block">6</div> 
    </div> 
</div> 
<div class="col-md-6 col-lg-4 hidden-md"> 
    <div class="row"> 
<div class="col-sm-12">5</div> 
    <div class="col-sm-12">6</div> 
    <div class="col-sm-12">7</div> 
    <div class="col-sm-12">8</div> 
    </div> 
</div> 
<div class="col-md-6 col-lg-4"> 
    <div class="row"> 
    <div class="col-sm-12 visible-md-block">7</div> 
    <div class="col-sm-12 visible-md-block">8</div> 
    <div class="col-sm-12">9</div> 
    <div class="col-sm-12">10</div> 
    <div class="col-sm-12">11</div> 
    <div class="col-sm-12">12</div> 
    </div> 
</div> 

fullscreen reuslt

중간 DIV는 tablets에 hidden이고 다른 열에있는 각 DIV는 visible-md-block 클래스

I는 JS없이 판단