Reorder Bootstrap Columns

Question

Der Versuch, Bootstrap-Spalten mit nützlichen Links in der Zeile mit dem leeren div und dem Lorem ipsum-Text neu anzuordnen, die 12 Spalten umfassen. Versucht mit Clearfix und verschiedenen Spaltengrößen, aber nichts funktioniert.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <!--Links--> 
 
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-4 col-md-offset-0"> 
 
     <h2>Useful Links</h2> 
 
     <ul> 
 
     <li><a href="#">Link 1 Title</a></li> 
 
     <li><a href="#">Link 2 Title</a></li> 
 
     <li><a href="#">Link 3 Title</a></li> 
 
     <li><a href="#">Link 4 Title</a></li> 
 
     </ul> 
 
    </div> 
 
    <!--Links close--> 
 
    
 
    <div class="clearfix"></div> 
 
    
 
    <!--Content--> 
 
    <div id="content-right" class="col-xs-10 col-sm-10 col-md-12 col-md-push-0"> 
 
     <h2>Content</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> 
 
    </div> 
 
    <!--Content close--> 
 
    
 
    <!--Twitter--> 
 
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-6 col-md-pull-6"> 
 
     <h2>Twitter</h2> 
 
    </div> 
 
    <!--Twitter close--> 
 

 
    </div><!-- row close --> 
 
</div>

Answer 1

Pull- und Push ist ein guter Weg, dies zu verwalten, aber das wird nur auf der gleichen Reihe arbeiten, weil dies der Div left und right Eigenschaft geben, die nicht schaffen ein neue Reihe. Eine Lösung (Workaround), die ich normalerweise verwende, ist das Erstellen des twitter div 2 mal. Wie so:

<div class="col-md-6 col-sm-12"> 
    <!-- Links --> 
</div> 
<div class="col-md-6 hidden-sm hidden-xs"> 
    <!-- Twitter --> 
</div> 
<div class="col-sm-12"> 
    <!-- Content --> 
</div> 
<div class="col-sm-12 hidden-md hidden-lg"> 
    <!-- Twitter --> 
</div> 

Answer 2

1. Zwei Ihrer Blöcke (links und twitter) die gleiche id="content-left". Es ist falsch. Die id muss eindeutig sein.

2. Sie können links und content in einen zusätzlichen Block einbinden und einen negativen Rand auf die content anwenden.

NB: Diese Lösung funktioniert, wenn die Höhe des twitter Blockes nicht größer ist als die Höhe des Blockes links ist.

Bitte überprüfen Sie das Ergebnis:

#block-links { background-color: #9fc; } 
 
#block-content { background-color: #ff9; } 
 
#block-twitter { background-color: #fc9; } 
 

 
@media (min-width: 992px) { 
 
    #block-content { 
 
    margin-right: -200%; 
 
    width: 300% !important; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <!-- Additional block --> 
 
    <div class="col-xs-10 col-md-4"> 
 
     <div class="row"> 
 

 
     <!--Links--> 
 
     <div id="block-links" class="col-xs-12"> 
 
      <h2>Useful Links</h2> 
 
      <ul> 
 
      <li><a href="#">Link 1 Title</a></li> 
 
      <li><a href="#">Link 2 Title</a></li> 
 
      <li><a href="#">Link 3 Title</a></li> 
 
      <li><a href="#">Link 4 Title</a></li> 
 
      </ul> 
 
     </div> 
 
     
 
     <!--Content--> 
 
     <div id="block-content" class="col-xs-12"> 
 
      <h2>Content</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
 
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> 
 
     </div> 
 
    
 
     </div> 
 
    </div> 
 
    
 
    <!--Twitter--> 
 
    <div id="block-twitter" class="col-xs-10 col-md-6 col-md-offset-2"> 
 
     <h2>Twitter</h2> 
 
    </div> 
 

 
    </div> 
 
</div>