Làm thế nào tôi có thể thay đổi thứ tự hiển thị của các yếu tố bằng cách sử dụng Bootstrap 3

Question

ai đó có thể giúp tôi Tôi đang cố gắng suy nghĩ làm thế nào tôi có thể làm điều này bằng cách sử dụng bootstrap, bất cứ ai có một đầu mối? Tôi không biết làm thế nào bạn có thể thay đổi thứ tự hiển thị của các yếu tố, tôi đoán chơi của nó xung quanh với phao nổi và xóa. Xin hãy giúp tôi cần giúp đỡ. Tôi đang sử dụng Bootstrap 3 cho bố cục đáp ứng, làm cách nào bạn có thể thay đổi thứ tự hiển thị chỉ bằng css?

Answer 1

@skelly là đúng bạn có thể sử dụng push và pull lớp học để thay đổi thứ tự hiển thị của các yếu tố. Các lớp học này không cung cấp cho bạn giải pháp phù hợp luôn.

Có rất nhiều câu hỏi khác về vấn đề này, xem ví dụ: Need to be able to swap grid on mobile

Vì em muốn thay đổi một hàng rộng 100% (hàng vàng) trong điện thoại di động (lưới xs)/xem tablet (md lưới) bạn không thể giải quyết điều này với nổi và/hoặc đẩy và kéo.

Tôi cũng tin rằng bạn không thể làm thsi với CSS mà không sửa một số thông số.

Khi tôi xem xét chiều cao của một số yếu tố của bạn biết/cố định cho quan điểm khác nhau, tôi có thể giải quyết nó với các truy vấn css và phương tiện truyền thông: http://bootply.com/85303

css:

@media (max-width: 768px) 
{ 
.yellow {margin-top:-60px;} 
.orange {margin-top:40px;} 
.col-xs-12{float:left;} 
} 
@media (min-width: 992px) and (max-width:1199px) 
{ 
    .col-md-12 {float:left;} 
    .darkgreen{float:right; margin-top:-60px;} 
} 
@media (min-width: 1200px) 
{ 
.blue{margin-top:-60px} 
} 

html :

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-xs-12" style="background-color:red;">&nbsp;</div> 
    </div> 

    <div class="row"> 
    <div class="orange col-lg-12 col-md-8 col-xs-12" style="background-color:orange;">&nbsp;</div> 
    <div class="yellow col-lg-8 col-md-12 col-xs-12" style=""> 
    <div class="row"> 
     <div class="col-lg-6 col-xs-12" style="background-color:yellow;height:40px;">1</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">2</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">3</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">4</div> 
    </div> 
    </div> 
    <div class="darkgreen col-lg-4 col-md-4 col-xs-12" style="background-color:darkgreen;">&nbsp;</div> 
    <div class="pink col-lg-8 col-md-12 col-xs-12" style="background-color:pink;">&nbsp;</div> 
    <div class="blue col-lg-4 col-md-12 col-xs-12" style="background-color:blue;height:40px;">&nbsp;</div> 
    </div> 

</div> 

Lưu ý một số yếu tố là chang ed bằng cách thêm lề trên (âm). Tôi có thể làm điều này chỉ khi tôi biết chiều cao của họ. Cũng thông báo tôi thêm một phao: bên trái cho col-xs-12 và col-xs-12.

Trong trường hợp thực tế bạn không biết chiều cao, bạn có thể thử tính toán nó bằng javascript (sử dụng response.js cho truy vấn phương tiện) và thêm các lề trên. Tôi không biết nếu điều này sẽ cung cấp cho bạn một giải pháp tốt hơn thì khi bạn sử dụng jQuery để thao tác DOM của bạn, hãy xem: Add new row and changing column classes on resize