使用引导推拉来更改列顺序 [英] Change column order using bootstrap push and pull

问题描述

我有3列，顺序如下：

 < div class =container-fluid> 
< h1> Hello World！< / h1> 
< p>调整浏览器窗口大小以查看效果。< / p> 
< div class =row> 
< div class =col-sm-3>左栏< / div> 
< div class =col-sm-6>中间栏< / div> 
< div class =col-sm-3>右栏< / div> 
< / div> 
< / div> 
  

我想通过推拉重新排序。我需要顶部的中心列和其他大小为6的列。

解决方案

我发现了一个很好的答案，它可能对您有用
在Twitter中使用col-lg-push和col-lg-pull进行列顺序操作引导3

Bootstrap是一个移动优先框架，因此您的HTML应该反映您网站的移动版本。然后在较大的屏幕上完成推动和拉动。

I have 3 columns in the following order:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-3">left column</div>
    <div class="col-sm-6">center column</div>
    <div class="col-sm-3">right column</div>
  </div>
</div>

And I want to re-order with push and pull. I need the center column on the top, and the others column with a size of 6.

解决方案

I found a great answer that it may be useful to you Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

Bootstrap is a "mobile first" framework, so your HTML should reflect the mobile version of your site. The Pushing and Pulling are then done on the larger screens.

这篇关于使用引导推拉来更改列顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！