Bootstrap-Auftragspalten gleicher Breite zusammen

Question

Ich habe ein Problem, Spalten neu anzuordnen und zu stapeln, wenn sie dieselbe Breite haben. Dies ist der Code von meiner Website:

... 
<div class="row"> 
    <div class="col-md-3 com-sm-4 hidden-xs">col-1 (</div> 
    <div class="col-md-6 com-sm-8">col-2 (main content)</div> 
    <div class="col-md-3 com-sm-4 hidden-xs">col-3</div> 
</div> 
... 

Also, was ich versuche, auf kleinen Geräten zu erreichen, ist dies:

--------- --------- 
| col-1 | | col-2 | 
|  | |  | 
--------- |  | 
| col-3 | |  | 
|  | |  | 
--------- |  | 
      ---------- 

Aber was ich habe, ist dies:

--------- --------- 
| col-1 | | col-2 | 
|  | |  | 
--------- |  | 
      |  | 
      |  | 
      |  | 
--------- --------- 
| col-3 | 
|  | 
--------- 

Wie kann ich diese beiden Spalten zum Stapeln zusammenstellen?

Answer 1

Es ist, weil Ihre Col-1 und Col-2 in der gleichen Zeile sind, aber Col-3 ist getrennt. Was Sie brauchen, ist dies:

<div class='row'> 
    <div class='col-xs-6'> 
    <div class='row'> 
     <div class='col-xs-12'> 
     Col-1 
     </div> 
    </div> 
    <div class='row'> 
     <div class='col-xs-12'> 
     Col-3 
     </div> 
    </div> 
    </div> 
    <div class='col-xs-6'> 
    Col-2 
    </div> 
</div> 

Answer 2

Unter der Annahme, dass col-2 ist größer als die anderen Sie ..

<div class="row"> 
     <div class="col-md-6 col-md-push-3 col-sm-8 col-sm-push-4"> 
      2 
     </div> 
     <div class="col-md-3 col-md-pull-6 col-sm-4 col-sm-pull-8"> 
      1 
     </div> 
     <div class="col-md-3 col-md-pull-0 col-sm-4 col-sm-pull-8"> 
      3 
     </div> 
</div> 

Demo tun können (Option 1): http://codeply.com/go/E9i34J7QMa

Eine weitere Option ist Verschachtelung ..

<div class="row"> 
     <div class="col-md-6 col-md-push-3 col-sm-8 col-sm-push-4"> 
      2 
     </div> 
     <div class="col-md-3 col-md-pull-6 col-sm-4 col-sm-pull-8"> 
      <div class="row"> 
       <div class="col-md-12"> 
        1 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-md-pull-0 col-sm-4 col-sm-pull-8"> 
      <div class="row"> 
       <div class="col-md-12"> 
        3 
       </div> 
      </div> 
     </div> 
</div> 

Demo (Option 2): http://codeply.com/go/E9i34J7QMa

Answer 3

Verwenden Sie eine Zeile div, um die letzte zu trennen, und passen Sie sie dann mithilfe der Col-Klassen an. Ich glaube, ich habe bekommen, was Sie richtig suchen here. Wenn Sie auf das Mobile klicken, wird es ohne Leerzeichen korrekt gestapelt.

Hier ist der Code auch:

<div class="row col-md-8"> 
<div class="col-md-6 col-xs-4 " style="background:lightblue">col-1 (</div> 
<div class="col-md-6 col-xs-8" style="background:green">col-2 (main content)</div> 
</div> 
<div class="row col-md-4"> 
<div class="col-md-12 col-sm-2 col-xs-4" style="background:lightblue">col-3</div> 
</div>