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

Question

我有一个 3 列布局的 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>

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

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

class col 只是为了展示它的工作原理，在你的标记中删除它