Bootstrap拉动和推动

时间:2015-03-25 11:02:59

标签: html css twitter-bootstrap

我正在努力探索Bootstrap拉动和推动方法。 我一直在玩,当我只切换2个div时,我得到了一个很好的工作示例。我理解那部分。

但我想要实现的目标需要额外的元素。

  <div class="row">
<div class="col-md-6 " style="background-color:grey;">TEXT</div>
<div class="col-md-6 col-md-push-12 " style="background-color:lavender;">IMAGE</div>
<div class="col-md-12 col-md-pull-12" style="background-color:lavenderblush;">FORM</div>
</div>

我知道上面的例子是错误的,我故意在12个字符串添加我的表格div以将其推到图像和文本div下面,我想要实现的是:

桌面:

  

[TEXT]   [IMAGE]

     

[........ FORM ........]

移动:

  

[TEXT]

     

[FORM]

     

[IMAGE]

我认为我需要在文本div中添加一些东西,我想?

1 个答案:

答案 0 :(得分:0)

我认为,如果col-lg-6您可以按col-push-lg-6.推送列 你不能将列推双倍 使用给定的示例作为其工作原理的参考。

如果不足以查看给定链接中DrGeneral给出的示例:

http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap

<div class="row">

    <div class="col-sm-6">
        Text
    </div>

    <div class="col-sm-12 col-sm-push-12">
        Image
    </div>

    <div class="col-sm-12 col-sm-pull-12">
        Form
    </div>


</div>

希望这个链接和示例有效.....