Tổ chức 3 cột 2 cột trong Twitter Bootstrap 3

Question

Vì vậy, đây hoàn toàn hoạt động (đi từ 4 cột đến 2 trên màn hình nhỏ):

<div class="row"> 
    <div class="col-lg-3 col-sm-6"> 1</div> 
    <div class="col-lg-3 col-sm-6"> 2</div> 
    <div class="col-lg-3 col-sm-6"> 3</div> 
    <div class="col-lg-3 col-sm-6"> 4</div> 
</div> 

Như làm 3 cột của tôi, tuy nhiên cột giữa được xếp chồng lên nhau trên đầu trang thứ ba (theo đó là cột bên phải/thứ 2).

<div class="row" id="footer"> 
    <div class="col-lg-3 col-sm-6"> 
     1 
    </div> 
    <div class="col-lg-3 col-sm-6"> 
     2 
    </div> 
    <div class="col-lg-6 col-sm-6"> 
     3 
    </div> 
</div> 

Làm cách nào tôi có thể yêu cầu cột giữa xếp chồng lên trên hoặc bên dưới cột đầu tiên? col-sm-pull-6 không hoạt động chẳng hạn.

kết quả mong muốn:

1 - 3 
2 - .. 

Vấn đề với chuyển mạch 2 và 3 và sau đó sử dụng push và pull, là cột thứ 2 vẫn đi một đầu cột thứ 3. Và tôi cần chúng giống như trong 'sơ đồ' mong muốn của tôi.

Chỉnh sửa: Những gì tôi có thể làm là cung cấp cột đầu tiên col-sm-12. Điều này sẽ đẩy 2 xuống khác. Bằng cách đó thứ tự là tốt, và vì nó cho một chân, thực tế là các đoạn văn cột là ở dưới cùng hoàn toàn, không phải là xấu hoặc. Nhưng tôi vẫn mở cho những gợi ý tốt hơn.

Lưới bây giờ trông như thế này:

1 
2 - 3 

Answer 1

Vì vậy, ở đây đi,

đầu tiên của tất cả các bạn nên sử dụng các mẫu thiết kế cho màn hình nhỏ hơn TRƯỚC màn hình lớn hơn như vậy:

<div class="col-sm-6 col-lg-3"> (...) 

Bây giờ để thiết kế của bạn xảy ra, bạn cần phải thực hiện điều này:

<div class="col-sm-6 col-lg-3"> 
1 
</div> 
<div class="col-sm-6 col-lg-3 col-lg-push-3"> 
3 
</div> 
<div class="col-sm-6 col-lg-3 col-lg-pull-3"> 
2 
</div> 

... những gì tôi đã làm là tôi đảo ngược thứ 2 với cột thứ 3 để chúng phù hợp với nhu cầu của tôi cho màn hình nhỏ hơn và sau đó bằng cách sử dụng đẩy và kéo tôi điều chỉnh cho màn hình lớn hơn.

chỉnh sửa: đây là một fiddle làm việc:

http://jsfiddle.net/ujrwyrbr/2/

Answer 2

Hãy chắc chắn để xem ra cho các div có độ cao khác nhau. Những thứ đó sẽ khiến mọi thứ không bị quấn sang bên trái như bạn mong đợi.

Bạn có thể giải quyết vấn đề này bằng cách sử dụng clearfix bootstrap (thậm chí có điều kiện) với một cái gì đó như:

<div class="clearfix visible-sm"></div> 

Đặt rằng sau một div nơi bạn muốn bắt đầu một dòng mới ở kích thước -sm. Lặp lại khi cần thiết.