Bootstrapの入れ子をレスポンシブの際に上下を逆にしたい
Bootstrapのグリッドは通常左にあるものがレスポンシブすると上、右にあるものがレスポンシブすると下にきます。
でも実際、サイドバーが右にしたい時
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row"> <div class="col-md-3"> ここにサイドバー内容 </div> <div class="col-md-9"> ここにコンテンツ内容 </div> </div> </div> |
そんなときにBootstrap。便利なクラスが存在します！
このような場合は下記の様に記載します。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3"> ここにコンテンツ内容 </div> <div class="col-md-3 col-md-pull-9"> ここにサイドバー内容 </div> </div> </div> |