Sắp xếp lại các div một cách có trách nhiệm với Twitter Bootstrap?

Question

Tôi đang làm việc với Twitter Bootstrap v3 và muốn sắp xếp lại các yếu tố một cách có trách nhiệm, sử dụng column ordering và offsetting.

Đây là cách tôi muốn sử dụng các yếu tố của mình. Tại -xs hay -sm breakpoint, với div chứa xếp chồng lên nhau từ 4 đến liên tiếp:

tại -md hoặc -lg breakpoint, với div chứa xếp chồng lên nhau 2 đến liên tiếp:

Đây là mã hiện tại - Tôi biết cách đặt các lớp trên div chứa, nhưng không phải trên A, B và C:

<div class="row"> 
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3"> 
     <div class="row"> 
     <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div> 
     <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div> 
     <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div> 
     </div> 
    </div> 
    ... more containing divs... 
    </div> 

Tôi không thể tìm ra cách nhận A, B và C theo thứ tự đúng với số column ordering và offsetting của Bootstrap 3. Nó thực sự có thể?

Đây là như xa như tôi đã sử dụng JSFiddle: http://jsfiddle.net/3vYgR/

Answer 1

Tôi nghĩ rằng bạn muốn nhìn vào push và pull lớp ...

<div class="row"> 
    <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div> 
    <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div> 
    <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div> 
</div> 

Demo: http://bootply.com/77853

Answer 2

Bất kỳ lý do gì để không sử dụng phương pháp truyền thống hơn về vấn đề này, ví dụ. nổi B trái và các yếu tố khác bên phải?

Giống như nếu bạn thêm này để CSS hiện tại jsfiddle của bạn:

.b { 
    float: left; 
    width: 50%; 
    height: 100px; 
} 
.a, .c { 
    float: right; 
    width: 50%; 
    height: 50px; 
} 

Xem http://jsfiddle.net/E6BFk/

Tôi không chắc chắn rằng cột đặt hàng Bootstrap của có thể thực hiện hiệu quả sắp xếp, có lẽ chỉ tái đặt hàng ... Mặc dù tài liệu khá mỏng về tính năng đó.

Answer 3

tôi đã cố gắng push/pull như trong câu trả lời của Skelly nhưng C kết thúc trong một hàng mới khi chiều cao được áp dụng: http://www.bootply.com/Q3djHYawgb#

Nếu B có thể được hiển thị trước khi được hiển thị ở kích thước nhỏ, tôi nghĩ sẽ tạo ra một hàng trong cột bên phải chứa A và C:

<div class="containing row"> 
    <div class="b col-xs-12 col-md-6">Content of B</div> 
    <div class="ac col-xs-12 col-md-6"> 
     <div class="row"> 
      <div class="a col-xs-12">Content of A</div> 
     </div> 
     <div class="row"> 
      <div class="c col-xs-12">Content of C</div> 
     </div> 
    </div> 
</div> 

Xem http://jsfiddle.net/hoodoo99/L2BE9/

Answer 4

Câu trả lời được cung cấp bởi @skelly là rất tốt điểm khởi đầu, nhưng không gây ra một số vấn đề liên kết dọc. Hãy tưởng tượng Một là một div cao, sau đó C được theo chiều dọc thẳng hàng dưới đây A .:

[A] [B] 
[ ] 
    [C] 

Ngoài ra, Nếu bạn muốn thực hiện việc này một bước xa hơn bạn cũng có thể cần phải xem xét sử dụng clearfix khối.Ví dụ;

<!-- Add clearfix for only the required viewport(s) --> 
<div class="clearfix visible-md-block visible-lg-block"></div> 

Without clearfixmd hoặc lg có thể kết thúc như:

[A] [B] 
    [C] [D] 

Điều này đặc biệt quan trọng nếu bạn muốn có nhiều hơn 2 yếu tố trong "cột" cuối cùng, hoặc những đỉnh cao của các yếu tố bắt đầu ném các yếu tố khác không liên kết.

Với clearfixmd hoặc lg sẽ là:

[A] [B] 
    [C] 
    [D] 

Ví dụ fiddle: http://jsfiddle.net/L5174o8d/