Bootstrap：行間のような振る舞いを取得しますか？

私はデスクトップモードで右のメニューを望むグリッドレイアウトを持っていますが、モバイルのトップにあります。Bootstrap：行間のような振る舞いを取得しますか？

<div class="row"> 
     <div class="col-sm-4 col-md-push-8"><div id="menu"></div><div id="side-content"></div></div> 
     <div class="col-sm-8 col-md-pull-4"><div id="main-content"></div></div> 
    </div>

しかし、私はデスクトップモードで、右に直接メニューの下に他のコンテンツを追加し、それがモバイル上のメインのコンテンツの下に移動したいのです：これは、このような正常に動作します。言い換えれば

、私はそれが、これはモバイルにどうなるのかのように見える終わるしたいと思います：

<div class="row"> 
     <div class="col-xs-12"><div id="menu"></div></div> 
     <div class="col-xs-12"><div id="main-content"></div></div> 
     <div class="col-xs-12"><div id="side-content"></div></div> 
    </div>

私はデスクトップで右に2つのセルを持つことができるので、それを作るための方法はあります一方のフローはメインコンテンツの上にあり、もう一方のフローはメインコンテンツの下に移動していますか？

編集：ここで私は

出典

2017-02-02 Mike

をwork--なり、これを試してみてくださいです助けることができます -

JSFiddle

HTMLコード -

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4 menuDiv"> 
     <div id="menu"> 
     <h1>menu</h1></div> 
    </div> 
    <div class="col-xs-12 col-sm-8"> 
     <div id="main-content"> 
     <h1>main</h1></div> 
    </div> 
    <div class="col-xs-12 col-sm-4 sideDiv"> 
     <div id="side-content"> 
     <h1>side</h1></div> 
    </div> 
    </div> 
</div>

CSSコード -

#menu{ 
    background-color:#60E877; 
} 

#main-content{ 
    background-color:#E86060; 
} 

#side-content{ 
    background-color:#685818; 
} 

@media(min-width:768px){ 
    .menuDiv, .sideDiv{ 
    float:right; 
    } 
}

出典

2017-02-02 07:08:58

ありがとう - これは動作します！私が気付いた唯一の事は、主コンテンツがメニューよりも短い場合、レイアウトが失敗するということです。しかし、私は何とかそれを処理できると思います。 – Mike

私のコードがあなたを助けてくれることを喜んでいる。 @マイク –

何を意味するかの絵は、それがリンクまたはコードの下Goはまたかもしれ

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      
 
    </head> 
 

 
    <body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: blue;"><div id="menu"><h1>menu</h1></div></div> 
 
     <div class="col-sm-pull-8 col-md-pull-8 col-lg-pull-8"><div id="main-content" style="background-color: red;"><h1>main</h1></div></div> 
 
     <div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: green;"> 
 
     <div id="side-content"><h1>side</h1></div></div> 
 
     
 
     
 
     
 
     </div> 
 
    </div> 
 

 
</body> 
 
    </html>

出典

2017-02-02 04:57:22 neophyte

おかげで - これは常にメインコンテンツ下記下部のサイドコンテンツを表示しないのだろうか？携帯のメニューのすぐ下にサイドがあるようにしたいと思います。したがって、右側にはメニューがあり、モバイル側にあるはずです。 – Mike

あなたのページをどのように見せたいかわからない...画像を追加してみてください。 – neophyte

ありがとうございます - 私は画像を追加しました... – Mike

Bootstrap：行間のような振る舞いを取得しますか？

答えて

関連する問題