Bootstrap-Spalten können nicht flüssig gemacht werden

Question

Ich habe eine schwere Zeit zu erklären, wie Englisch ist nicht meine Muttersprache, also bitte mit mir.

Ich versuche, meine divs in gewissem Sinne "flüssig" zu machen. Beispiel: Ich habe drei divs und jeder hat eine Klasse: <div col-12-xs col-6-md>

Dies bedeutet, dass auf einem mittleren und großen Bildschirm div eins und zwei nebeneinander sein würden und div 3 würde unter ihnen sein.

<div class="container"> 
     <div class="row"> 
      <div class="col-sm-6 box">One</div> 
      <div class="col-sm-6 box"> 
       Two 
       <br> 
       Two 
       <br> 
       Two 
      </div> 
      <div class="col-sm-6 box">Three</div> 
     </div> 
    </div> 

Also, wenn dieses Beispiel-Code wird verwendet, um Sie würden offensichtlich die dritte div nach unten drängen, während div zwei in der Höhe wächst, da mehr Inhalte hinzugefügt.

Meine Frage ist dies. Gibt es einen Weg, dass ich diff drei unter div bleiben kann, wie div zwei in der Höhe wächst, aber wenn der Bildschirm kleiner div zwei ist, sollte noch unter div eine und über dif drei bewegen. Wie Sie auf dem Bild sehen können, möchte ich div drei unter div eins haben, auch wenn div zwei in der Höhe wächst, aber auf einem kleinen Bildschirm div zwei sollte sich zwischen div eins und zwei bewegen.

Kann dies mit Bootstrap erfolgen?

Answer 1

Machen Sie das zweite div zu float:right immer bleiben verursacht. Ich habe pull-right Klasse für das hinzugefügt, wie Sie bootstrap

hier verwendet werden, ist meine Geige https://jsfiddle.net/ze4g18a7/

 div { 
 
      text-align:center; 
 
      font-size:20px; 
 
     } 
 

 
     .div1 { 
 
      height: 200px; 
 
      background-color: #ffe6ff; 
 
     } 
 

 
     .div2 { 
 
      height: 400px; 
 
      background-color: #ccfff5; 
 
     } 
 

 
     .div3 { 
 
      height: 200px; 
 
      background-color: #80dfff; 
 
     }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 
     <div class="div1 col-xs-12 col-sm-6 col-md-6 col-lg-6">1</div> 
 
     <div class="div2 col-xs-12 col-sm-6 col-md-6 col-lg-6 pull-right">2</div> 
 
     <div class="div3 col-xs-12 col-sm-6 col-md-6 col-lg-6">3</div> 
 
    </div>

Answer 2

Sie könnten eine clearfix nach den ersten 2 divs, wie so hinzufügen:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 box">One</div> 
     <div class="col-sm-6 box"> 
      Two 
      <br> 
      Two 
      <br> 
      Two 
     </div> 
     <div class="clearfix col-xs-12></div> 
     <div class="col-sm-6 box">Three</div> 
    </div> 
</div> 

Dies ist das dritte div unter dem oberen zwei