HTML/CSS引导程序具有3列布局，中间一列位于顶部

Question

我有一个html页面，它有三列布局，使用引导程序完成，基本上如下所示：

<div name="column1" class="col-md-3"> 
   //column content here
</div>
<div name="column1" class="col-md-6"> 
   //column content here
</div>
<div name="column1" class="col-md-3"> 
   //column content here
</div>

这只是一个例子，我认为里面的内容与这个问题无关。问题是，当我重新调整页面大小时，我希望中间的列保持在页面的顶部，而两侧的列则堆叠在其下方。

Answer 1

您可以使用Bootstrap的类：

<div class="row">
  <div class="col-md-push-3 col-md-6 col-xs-12">
    //column Center here
  </div>
  <div class="col-md-pull-6 col-md-3 col-xs-6">
    //column left here
  </div>
  <div class="col-md-3 col-xs-6">
    //column right here
  </div>
</div>

JSFiddle

类col只是为了显示它是如何工作的，请在标记中删除它