Change div Position bei Änderung der Seitengröße

Question

Ich möchte eine Div-Gruppen mit Bootstrap wie folgt erstellen.

------------------------------- 
|        | 
| |first div | | main | | 
|     | div | | 
| |second div| |  | | 
|        | 
------------------------------- 

Damit auf kleineren Bildschirm würde es wie folgt aussieht:

------------------ 
|     |    
| |first div | | 
|     |  
| | main | |  
| | div | | 
| |   | | 
|     | 
| |second div| | 
|     | 
------------------ 

Ist es möglich?
Wenn ja, Dann führe mich bitte.

Answer 1

Versuchen Sie es mit diesen:

.col { 
 
    float: left; 
 
    margin: 20px; 
 
    padding-bottom: 100px; 
 
    margin-bottom: -100px; 
 
} 
 
.div-1{ 
 
    background: #ccc; 
 
} 
 
.div-2{ 
 
    background: #ddd; 
 
} 
 
.div-3{ 
 
    background: #eee; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-xs-12 div-1 col">First Div</div> 
 
    <div class="col-md-8 col-xs-12 div-2 col">Main Div</div> 
 
    <div class="col-md-3 col-xs-12 div-3 col">Second Div</div> 
 
    </div> 
 
</div>

Check here for demo

Answer 2

Mit dieser strikten Positionsreihenfolge müssen Sie POSITION: ABSOLUTE verwenden und die TOP LINK WIDTH HEIGHT-Attribute definieren. Ändern Sie dann in der CSS-Medienabfrage die TOP LINKE BREITE HÖHE nach Ihren Bedürfnissen.

Answer 3

Als mein Verständnis Wenn Sie die Richtung ändern möchten, ist es möglich, aber ein bisschen schwierig mit JavaScript.

Also wenn ich es in Bootstrap übersetze, sieht es so aus.

------------------------------- 
|        | 
| |first div | | main | | 
|     | div | | 
| |second div| |  | | 
|        | 
------------------------------- 

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8 col-xs-12"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        first div 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12"> 
        second div 
       </div> 
      </div> 
     </div> 
     <div class="col-lg-4 col-xs-12"> 
      main div 
     </div> 
    </div> 
</div> 

Dann im mobilen wird es aussehen.

------------------ 
|     |    
| |first div | | 
|     | 
| |second div| | 
|     | 
| | main | |  
| | div | | 
| |   | | 
|     | 
|     | 
|     | 
------------------ 

Bootstrap bieten auch col-pull und col-push jedoch ausschließlich auf das Element in der gleichen Zeile angelegt, so wird dies nicht der Fall sein, wenn das erste div durch irgendwie die gleiche Höhe mit dem Haupt div hat und wir können gruppiere diese zwei in einer Reihe.

Lassen Sie mich die richtige Lösung finden und kommen Sie bald wieder :)