Bootstrap: Wie Spalte ganz links Tropfen nach unten zu machen, anstatt oben auf Resize

Question

meine aktuellen Setup wie diese

Desktop 
________________________________ 
|   |  Content  | 
| Sidebar |  Content  | 
|   |  Content  | 
--------------------------------- 

Mobile 
__________________ 
|     | 
|  Sidebar | 
|     | 
------------------- 
|     | 
| Content  | 
|     | 
|     | 
------------------- 

ich die Desktop-gleich bleiben wollen aussehen, habe aber den Kasten Tropfen auf den Boden statt

___________________ 
|     | 
| Content  | 
|     | 
|-----------------| 
|     | 
|  Sidebar | 
|     | 
------------------- 

Gibt es eine Möglichkeit für mich, das Grid-System dies zu tun? Oder gibt es eine andere Methode, um sicherzustellen, dass das funktioniert? Die Sidebar ist eine Vorlage, die auf meiner Rückseite gerendert wird, mit viel Inhalt und Verarbeitung, also möchte ich nicht wirklich etwas verstecken/zeigen, wenn ich es vermeiden kann.

Danke!

Sammy

Answer 1

Sie können es in der folgenden Art und Weise zu erreichen, verwenden Sie einfach push and pull classes -

Arbeitsbeispiel

#content{ 
 
height:60px; 
 
background-color: red; 
 
} 
 
#sidebar{ 
 
height:60px; 
 
background-color: blue; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
    <div id="content" class="col-xs-12 col-md-6 col-md-push-6"> 
 
    content 
 
    </div> 
 
    <div id="sidebar" class="col-xs-12 col-md-6 col-md-pull-6"> 
 
    sidebar 
 
    </div> 
 
    </div> 
 
    </div>

hoffe, das hilft!