Wie man Zeilen in Bootstrap 3 neu anordnet

Question

Zuerst sah ich viele Threads über diese Frage wie Here und Here. Aber das Problem ist nicht gelöst!

Ich muss zwei Zeilen neu anordnen. Ich habe dies:

HTML:

<div class="row first-row"> 
    <div class="col-xs-6">Col-1</div> 
    <div class="col-xs-6">Col-2</div> 
</div> 
<div class="row second-row"> 
    <div class="col-xs-6">Col-3</div> 
    <div class="col-xs-6">Col-4</div> 
</div> 

DEMO

Ich brauche first-row mit second-row neu zu ordnen.

Jede Hilfe wäre willkommen.

Answer 1

Wenn Sie ein div haben die Zeilen Umwickeln Sie diese verwenden können:

.wrapper { 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
.first-row { 
 
    background: blue; 
 
    display: table-row-group; 
 
} 
 

 
.second-row { 
 
    background: red; 
 
    display: table-header-group; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <div class="row first-row"> 
 
    <div class="col-xs-6"> 
 
     Col-1 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     Col-2 
 
    </div> 
 
    </div> 
 
    <div class="row second-row"> 
 
    <div class="col-xs-6"> 
 
     Col-3 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     Col-4 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie können machen die first-row absolut positioniert ist, und schieben Sie es auf den Boden

CSS

.container { 
    padding: 0; 
    position: relative; 
} 

.first-row { 
    background: blue; 
    position: absolute; 
    top: 100%; 
    width: 100%; 
} 

.second-row { 
    background: red; 
} 

HTML

<div class="container"> 
    <div class="row first-row"> 
    <div class="col-xs-6">Col-1</div> 
    <div class="col-xs-6">Col-2</div> 
    </div> 
    <div class="row second-row"> 
    <div class="col-xs-6">Col-3</div> 
    <div class="col-xs-6">Col-4</div> 
    </div> 
</div> 

Answer 3

Hier ist ein netter kleiner Trick, um die Reihenfolge der Kinder umkehren Elemente, wickeln Sie es um Ihre Zeilen:

.reverse-order { 
    -webkit-transform: scaleY(-1); 
    -moz-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -ms-transform: scaleY(-1); 
    transform: scaleY(-1); 
} 

.reverse-order > div, 
.reverse-order > span, 
.reverse-order > li { 
    -webkit-transform: scaleY(-1); 
    -moz-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -ms-transform: scaleY(-1); 
    transform: scaleY(-1); 
} 

JSFiddle

Was es tut: Es klappt einfach jedes Kind-Element vertikal, und kippt das Ganze wieder. Dies funktioniert jedoch nur vertikal. Horizontal sollten Sie mit -push arbeiten und -pull