Question

我正在使用Bootstrap 3。在大屏幕上，我想在左边有一个侧边栏，在右边有一个主要内容。在小屏幕上，我希望侧边栏上有重要的块，然后是主要内容，然后是侧边栏中不太重要的块。有没有办法实现这个目标？

这是一个显示问题的JS Bin：http://jsbin.com/wibucopi/1/以下是当前代码（但是，它会在小屏幕上显示所有侧边栏内容）。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <div class="upper" style="background:red">
        <h3>I want to be <b>above</b> the main content on small screens!</h3>
      </div>
      <div class="lower" style="background:green">
        <h3>I want to be <b>below</b> the main content on small screens!</h3>
      </div>
    </div>
    <div class="col-sm-9">
      <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

我已经玩过col-sm-pull/push-x，但我只能实现整个侧边栏显示在小屏幕上的maincontent下方。

我不希望复制内容并使用visible-XY，hidden-XY显示/隐藏内容，因为页面会变大，感觉就错了。

有一个纯Bootstrap css 解决方案，或者至少只有一个css（我不想使用js）会很棒。

Answer 1

你可以这样做：

Bootply Demo

<强> HTML：

<div class="container-fluid">
  <div class="row">
    <div class="upper col-sm-3" style="background:red">
      <h3>I want to be <b>above</b> the main content on small screens!</h3>
    </div>
    <div class="col-sm-9 col-sm-pull-right">
      <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
    </div>    
    <div class="lower col-sm-3" style="background:green">
      <h3>I want to be <b>below</b> the main content on small screens!</h3>
    </div>
  </div>
</div>

<强> CSS：

@media (min-width: 768px) {
  .col-sm-pull-right {
      float: right;
  }
}
.lower {
  clear: left;
}

Bootstrap中是否有一种方法可以解析＆＃34;拆分＆＃34;小屏幕上的一栏？

1 个答案:

Bootply Demo