twitter-bootstrap 使用引导程序 3 使左侧边栏出现在移动设备的右侧栏下方

Making a left sidebar appear under a right hand column on a mobile with bootstrap 3

提问by dotty

I have a layout where the sidebar is on the left. This isn't a problem on desktop browsers. However, when it's resized to mobile, the sidebar appears above the main column.

我有一个侧边栏位于左侧的布局。这在桌面浏览器上不是问题。但是，当它调整为移动时，侧边栏会出现在主栏上方。

The problem is illustrated at http://bootply.com/89871

该问题在http://bootply.com/89871 中说明

Does anyone know how to get them to swap? I'd prefer a CSS solution if possible.

有谁知道如何让他们交换？如果可能，我更喜欢 CSS 解决方案。

回答by Andrew

There may be a better way to do this, but here is what I would do:

可能有更好的方法来做到这一点，但这是我要做的：

<div class="container"> 
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side hidden-sm">
        Left (Side) - Move content to Partial View
      </div>
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side visible-sm">
        Bottom - Load content from Partial VIew
       </div>
    </div>    
</div>

What I did:

我做了什么：

1. Add a class hidden-smand visible-smto hide the first div and make the third div visible when it is a mobile device. You may want to change the classes to adjust for tablets if needed.
2. I would recommend moving the content of the left side bar to a partial view and then load that partial in both divs. This way you don't have duplicate content.

1. 添加一个类hidden-sm并visible-sm隐藏第一个 div 并使第三个 div 在它是移动设备时可见。如果需要，您可能希望更改类以适应平板电脑。
2. 我建议将左侧栏的内容移动到局部视图，然后在两个 div 中加载该局部视图。这样你就没有重复的内容。

Update

更新

This way is better:

这种方式更好：

<div class="container clearfix"> 
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main pull-right">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side pull-left">
        Left (Side) - Move content to Partial View
      </div>
    </div>    
</div>

What I did:

我做了什么：

1. Add clearfixto container divsince we are floating divs
2. Make the Right Content first in the markup
3. Add pull-rightand pull-leftto float the content where it should be

1. 添加clearfix到container div因为我们是浮动 div
2. 在标记中首先制作正确的内容
3. 添加pull-right和pull-left浮动内容应该在的地方

回答by cchiera

The cleaner approach would be using Bootstrap's native column ordering classes.

更简洁的方法是使用 Bootstrap 的本机列排序类。

"Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes."

“使用 .col-md-push-* 和 .col-md-pull-* 修饰符类轻松更改我们内置网格列的顺序。”

<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>

Will result in the left column appearing on the right and the right on the left.

将导致左列出现在右侧，右侧出现在左侧。

Source: http://getbootstrap.com/css/#grid-column-ordering

来源：http: //getbootstrap.com/css/#grid-column-ordering