web-dev-qa-db-ja.com

Bootstrap divの順序を3列で右プル、左プルで変更

私は一日中これに取り組んでいますが、解決策を思いつきません。コンテナの1行に3列あります。

1：適切なコンテンツ–プルライト

2：ナビゲーション-プル左

3：メインコンテンツ

大画面での表示：

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

小さい画面でどのように見えるか：

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

今の様子：

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

私はそれが単なる単純な浮遊問題だと思う。しかし、私はほとんどすべての可能性を試しました。

csstwitter-bootstrapcss-floattwitter-bootstrap-3
57
user2982964

ブートストラップ3

Bootstrap 3のグリッドシステムの使用：

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-Push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

作業例： http://bootply.com/93614

説明

まず、画面の解像度（col-xs-*）に関係なく所定の位置にとどまる2つの列を設定します。

次に、大きくて右側の列を2つの列に分割します。これらの列は、タブレットサイズのデバイスでは上下に折りたたまれます（col-md-*）。

最後に、一致するクラス（col-md-[Push|pull]-*）を使用して表示順序をシフトします。最初の列を2番目の量だけ押し、2番目の列を最初の量だけ引きます。

98
Sean Ryan

これを試して...

<div class="row">
    <div class="col-xs-3">
        Menu
    </div>
    <div class="col-xs-9">
        <div class="row">
          <div class="col-sm-4 col-sm-Push-8">
          Right content
          </div>
          <div class="col-sm-8 col-sm-pull-4">
          Content
          </div>
       </div>
    </div>
</div>

ブートプライ

5
Zim