Jak zmienić kolejność wyświetlania elementów za pomocą Bootstrap 3

Question

Czy ktoś może mi pomóc Próbuję się zastanowić, jak mogę to zrobić za pomocą bootstrap, czy ktoś ma jakąś wskazówkę? Nie wiem, jak zmienić kolejność wyświetlania elementów, myślę, że jest to możliwe dzięki funkcjom float i clears. Proszę o pomoc, potrzebuję pomocy. Używam Bootstrap 3 do responsywnych układów, jak zmienić kolejność wyświetlania tylko za pomocą css?

Answer 1

@skelly ma rację można użyć push i wyciągnąć lekcje, aby zmienić kolejność wyświetlania elementów. Te klasy nie zawsze dają właściwe rozwiązanie.

Istnieje wiele innych pytań o to, patrz na przykład: Need to be able to swap grid on mobile

Bo chcesz zmienić szerokość 100% wiersz (żółta wiersz) w telefonie (siatki xs)/widok tabletka (siatki md) nie możesz tego rozwiązać przez unoszenie się i/lub pchanie i ciągnięcie.

Uważam również, że nie można wykonywać tych zadań tylko za pomocą CSS bez naprawiania niektórych parametrów.

Kiedy rozważyć wysokość niektóre z elementów znanych/ustalony dla różnych widoków, można go rozwiązać z CSS i mediów zapytań: 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> 

Uwaga niektóre elementy są zmienione ed przez dodanie (ujemnego) górnego marginesu. Mogę to zrobić tylko wtedy, gdy znam ich wysokość. Zwróć też uwagę, że dodaję float: pozostawiono dla col-xs-12 i col-xs-12.

W rzeczywistej sytuacji, w której nie znasz wysokości, możesz spróbować obliczyć ją za pomocą javascript (użyj funkcji response.js dla zapytań o media) i dodaj górne marginesy. Nie wiem, czy da ci to lepsze rozwiązanie, gdy użyjesz jQuery do manipulowania DOM, zobacz: Add new row and changing column classes on resize