Bootstrap 3:如何使用推挽将左侧边栏拖放到内容下方 [英] Bootstrap 3: How to drop the left sidebar drop below content using push-pull

问题描述

我正在使用Bootstrap 3，并且要在移动设备上垂直堆叠所有div(侧边栏和内容)，并将左侧边栏定位在移动设备上主容器下方(当前位于左侧边栏的右侧)(xs)设备.HTML，看起来像这样

I am using Bootstrap 3 and on mobile devices I'd like to vertically stack all the div's (sidebar & content) and position the left sidebar below the main container (currently to the right of the left sidebar) on mobile (xs) devices. The HTML, looks like this

<div class="container">
 <div class="row">
   <div class="col-sm-3 col-xs-push-9"> Sidebar</div>
   <div class="col-sm-9 col-xs-pull-3"> Main Container</div>
 </div>

上述问题是，在侧边栏上使用 col-xs-pull-9 在主容器上使用 col-xs-pull-3 ，它们以相反的顺序出现在大型( lg )媒体( md )和( sm )设备上.我不想颠倒顺序，而只想让左侧的侧边栏在超小型移动设备上位于主容器下方.

The problem with above is that, using col-xs-push-9 on sidebar and col-xs-pull-3 on main container they appear in reverse order on large(lg) medium(md) and (sm) devices. I do not want to reverse the order but only want to have the left sidebar below the main container on extra small mobile devices.

我想要一个自举解决方案而不是JS/jQuery解决方案.

I want a bootstrap solution not a JS / jQuery solution.

请帮助.

关于，dk

推荐答案

如果您认为移动优先"，请先按所需的移动顺序排列列，然后使用推/拉为较大的屏幕调整列.

If you think "mobile-first", layout the columns in the desired mobile order first, then use push/pull to adjust the columns for larger screens..

<div class="container">
 <div class="row">
   <div class="col-sm-9 col-sm-push-3"> Main Container</div>
   <div class="col-sm-3 col-sm-pull-9"> Sidebar</div>
 </div>
</div>

http://codeply.com/go/8g4UL0J43K

这篇关于Bootstrap 3:如何使用推挽将左侧边栏拖放到内容下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！