Wie kann ich die Anzeige Reihenfolge der Elemente mit Bootstrap 3 ändern

Question

kann jemand mir helfen, ich versuche zu denken, wie kann ich dies mit Bootstrap tun, jemand eine Ahnung haben? Ich weiß nicht, wie Sie die Anzeigereihenfolge der Elemente ändern können, ich schätze es spielt mit Schwimmern und löscht. Bitte helfen, ich brauche Hilfe. Ich benutze Bootstrap 3 für die Responsive Layouts, wie können Sie die Anzeigereihenfolge nur mit CSS ändern?

Answer 1

@skelly ist rechts können Sie den Push verwenden und Klassen ziehen die Anzeigereihenfolge der Elemente zu ändern. Diese Klassen geben Ihnen nicht immer die richtige Lösung.

Es gibt viele andere Fragen zu diesem Thema finden Sie zum Beispiel: Need to be able to swap grid on mobile

Ursache Sie eine Breite von 100% Zeile ändern möchten (die gelbe Reihe) im Mobil (xs Raster)/Tablette Ansicht (md Gitter) Sie können das nicht mit Floaten und/oder Drücken und Ziehen lösen.

Ich glaube auch, dass Sie thsi mit CSS nur tun können, ohne einige Parameter zu reparieren.

Wenn ich die Höhe von einigen Ihrer Elemente bekannt/fixed für verschiedene Ansichten betrachten, kann ich es mit CSS und Medien-Anfragen lösen: 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> 

Hinweis einige Elemente sind chang durch Hinzufügen eines (negativen) oberen Randes. Ich kann das nur, wenn ich ihre Größe kenne. Beachten Sie auch, dass ich einen Schwimmer hinzufüge: links für col-xs-12 und col-xs-12.

In der realen Situation, in der Sie die Höhe nicht kennen, können Sie versuchen, es mit Javascript zu berechnen (verwenden Sie respond.js für Medienanfragen) und fügen Sie die oberen Ränder hinzu. Ich weiß nicht, ob das Ihnen eine bessere Lösung dann geben wird, wenn Sie jQuery verwenden, um Ihr DOM zu manipulieren, sehen Sie: Add new row and changing column classes on resize