3

Twitter Bootstrap 3 を使用して、モバイル対応の Web サイトを作成しています。大きな画面では、2 つの項目 (スケッチの #1 と #2) を左側のサイドバーに配置し、大きなコンテンツ領域 (#3) を右側に配置したいと考えています。小さい画面（モバイル）では、#1、#3、#2 の順に重ねて表示したいです。

次の操作を行うと、3 番目のスケッチが作成されます。

<div class="row">
    <div class="col-lg-5">#1</div>
    <div class="col-lg-7">#3</div>
    <div class="col-lg-5">#2</div>
</div>

ご覧のとおり、#2 div が新しい行にプッシュされています。列をプッシュ/プルしようとしましたが、運がありませんでした。

＃2を複製し、CSSで条件付きで非表示/表示することで、I wantの「汚い」バージョンを実現できますが、これは醜いハックのようです。

Bootstrap (または別の CSS グリッド システム) を使用してスケッチを作成できますか?

希望するレイアウトのスケッチ

4

2 に答える 2

8

右にフロートしてみてください: (参照: http://bootply.com/78158 )

CSS :

.floatright{float:right;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}

HTML :

<div class="container"> 
<div class="col-sm-5" style="height:50px;background-color:green;">1</div>
<div class="col-sm-7 floatright" style="height:100px;background-color:red;">3</div>
<div class="col-sm-5" style="height:50px;background-color:green;">2</div>
</div>
于 2013-08-31T10:20:27.753 に答える