自举列推/拉问题

Question

我以为我明白pushing和pulling列的工作原理......但我想我错了。我有以下jsfiddle，我创建了一个非常简单的网格。它看起来像这样同时xs：

保险人名称

面值

性别

产品

，然后当我在sm，它看起来像这样：

被保险人姓名|面额

性别|产品

到目前为止我都很好。但是，当我到达md时，我需要“面数量”和“性别”字段来切换地点。正如你所看到的（从小提琴）我试图push FaceAmount字段6列（我预计这个字段将被推下到下一行），然后性别字段6列（从而拉起了一排） 。

但是，如果您将小提琴拉出到md的视角...... FaceAmount列将向右推（而不是折下），并且性别字段将向左拉到您的位置甚至无法再看到它。

有什么，我失踪？我会预料到，因为我推动FaceAmount字段通过了12列标记，它将包围。同样，我期望Gender字段被拉到前一行。

Answer 1

，我认为你是对的说：

我推FaceAmount场通过12列标记

而且，你似乎明白使用push和pull。 jsfiddle中的问题是您试图在两个不同的行之间重新排列。例如，你可以把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

这项工作！ 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

你能得到这个工作，如果你可以使用md的col-md-3视和整个显示4列。

<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