在Twitter Bootstrap 2中，当缩小屏幕时，怎样才能让右栏移动到顶部？
我在Twitter Bootstrap中使用了2列stream体布局。 左栏是主要内容（span10），右栏是小工具（span2）的侧栏。 目前，在调整浏览器窗口的大小时，Bootstrap通过创build一列，最左边的部分在最上面，最右边的部分作为响应。 我想反过来。
这是我的HTML的要点：
<body> <div id="content" class="container-fluid"> <div id="content-row-1" class="row-fluid"> <div id="mainContainer" class="span10"> Lots of content goes here </div> <div id="sidebar" class="span2"> Widgets </div> </div> <!-- content-row-1 --> </div> <!-- content --> </body> 有没有什么办法可以在左边的窗口中放置mainContainer ，在右边的窗口放置Widget，但是当窗口缩小的时候，把sidebar放到顶部？
今天回答了这个问题，你可以在这里看到，基本上是把侧边栏的stream向右移，补偿内容区域的左边界，然后重新设置浮动@media查询的侧边栏属性再次以引导样式表的缺省值容纳侧边栏。
CSS
body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } #sidebar { float:right; } #content { margin-left: 0; } @media (max-width: 767px) { #sidebar { float:none; } }
下面是上一个问题的重做演示： 小提琴 ， 在这里编辑。
在bootstrap 3中，这是通过网格列顺序完成的（ 请参阅bootstrap 3文档 ）
例
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
如果有足够的空间，这将显示较低的div后面的上部div 。 如果屏幕尺寸减小，上面的div将保持不变。
我来解决这个问题后，用一个非常简单的方法来实现这一点。 不需要@media也不需要百分比：
- 把你想要的div放在手机页面的顶部。 在这种情况下#sidebar在HTML代码中的#mainContainer之前
- 给课堂上的右拉
- 给#maincontainer类左拉
- 为这2个div设置margin-left为0
因此，您可以在桌面右侧使用侧边栏，在手机上使用右侧边栏。
例：
--- HTML <div id="content" class="container-fluid"> <div id="content-row-1" class="row-fluid"> <div id="sidebar" class="span2 pull-right"> Widgets </div> <div id="mainContainer" class="span10 pull-left"> Lots of content goes here </div> </div> <!-- content-row-1 --> </div> <!-- content --> --- CSS div#sidebar, div#mainContainer { margin-left: 0; }
取决于你的参数，只需在html源代码顺序中反转sidebar和mainContainer div，然后float: right 。 就像： http : //jsfiddle.net/3g8Bt/ 。
我想出了一个超级简单的解决scheme，似乎至less有一个2列的布局。 只要为你的标记和一些简单的CSS创build一个新的类。
HTML（从我的Drupal .tpl中拉出来）
<div class="row-fluid"> <div class="span9 pull-right re-order"> <?php print $content['content']; ?> </div> <div class="span3 re-order"> <?php print $content['sidebar']; ?> </div> </div>
CSS
.row-fluid .re-order { margin: 0; } .row-fluid [class*="span"]:last-child { margin-right: 2.7624309392265194%; margin-left: 0; }
这可能可以稍微改进一点，但它的工作原理。
接受的答案很好。 或者，有时你需要在反引导位置出现几个html文件，情况就会变得复杂。 也可以通过创build重复的html-snips来解决它，并使用.visible-phone和.hidden-phone来控制它们的显示/隐藏。
<div class="row-fluid"> <div class="span12 visible-phone"> <ul> <li><a href="">tab1</a></li> <li><a href="">tab2</a></li> <li><a href="">tab3</a></li> <li><a href="">tab4</a></li> </ul> </div> </div> <div class="row-fluid"> <div class="span9"> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <div class="span3 hidden-phone"> <ul> <li><a href="">tab1</a></li> <li><a href="">tab2</a></li> <li><a href="">tab3</a></li> <li><a href="">tab4</a></li> </ul> </div> </div>
小提琴
