ブートストラップカラムプッシュ/プル発行

Question

pushingとpullingのコラムがどのように機能するのか分かりましたが、私は間違っていたと思います。私は非常に単純なグリッドを作成した次のjsfiddleを持っています。それはxsで、この中に次のようになります。

性別

製品

被保険者名

額面金額と私はsmにいるときに、それはこのようにように見えます：

被保険者名|顔の額

性別|商品

私はそれまでのところすべて良いです。しかし、私がmdに行くとき、私はFace AmountとGenderフィールドが必要です。あなたは（フィドルから）私がこのフィールドが次の行にプッシュダウンされることを期待したpush FaceAmountフィールド6列にしようとしていたし、pullジェンダーフィールド6列（したがって、行を引っ張って） 。

md視点にフェードアウトするとFaceAmountの列が（ラッピングする代わりに）右にプッシュされ、ジェンダーフィールドが左に引き寄せられてもはやそれを見ることができません。

紛失しているものがありますか？私は、FaceAmountフィールドをプッシュしてから、12の列のマークを渡してから折り返すと予想していました。同様に、私はGenderフィールドが前の行に引き上げられると予想しました。私はあなたが正しいと言っていると思う

Answer 1

：

私はFaceAmountフィールドを押していますが、12列のマークに

を通過した。また、あなたはpushとpullを使用することを理解しているようです。 jsfiddleの問題は、2つの異なる行の間で再配置しようとしていることです。たとえば、Insured Nameをプッシュすることができますし、使用してFace Amountを引く：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 1 </div> 
     </div> 
     <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4"> 
      <div class="well"> 3 </div> 
     </div> 
     <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4"> 
      <div class="well"> 2 </div> 
     </div> 

     <div class="clearfix hidden-sm"></div> 

     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 4 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 5 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 6 </div> 
     </div> 
    </div> 
</div> 

結果：

をしかし、異なる行の間で行っている間、それはそのように動作しません。 this記事から：あなたが指摘したよう

左または右のプロパティを設定することで、作品を押し引きとして、それは別の行に折り返されることはありません。

Hereはプッシュ＆プルの動作を理解するのに非常に良い記事です。

Answer 2

この作品！あなたがmdにcol-md-3ビューポートを使用し、全体で4列を表示することができます場合は、この作業を取得することができますhttp://jsfiddle.net/ujrwyrbr/68/

<div class="row"> 
          <div class="col-sm-6 col-md-12"> 
           <div class="row"> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="row"> 
               <div class="col-xs-6"> 
                Insured Name: 
               </div> 
               <div class="col-xs-6"> 
                Some Name 
               </div> 
              </div> 
             </div> 
            </div> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Face Amount: 
              </div> 
              <div class="col-xs-6"> 
               Some Amount 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-12 col-sm-6"> 
           <div class="row"> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Gender: 
              </div> 
              <div class="col-xs-6"> 
               Male 
              </div> 
             </div> 
            </div> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Product: 
              </div> 
              <div class="col-xs-6"> 
               Some Product 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

Answer 3

。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Insured Name: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-md-push-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Face Amount: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 


     <div class="col-xs-12 col-sm-6 col-md-3 col-md-pull-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Gender: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Product: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

ネストされたcolsは別のrow内であることをあまりにも覚えておいてください。 http://www.codeply.com/go/AMAmnvznK6