Есть ли способ в Bootstrap "разбить" столбец на маленьких экранах?

Я использую 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, но я мог только достичь того, что боковая панель целиком отображается под основным контентом на небольших экранах.

Я не хочу дублировать содержимое и показывать/скрывать его с помощью visible-XY, hidden-XY, поскольку страница будет увеличиваться, и это просто неправильно.

Было бы здорово иметь чистое решение bootstrap css или, по крайней мере, только css (я бы не хотел использовать js).

Ответы

Ответ 1

Вы можете сделать что-то вроде этого:

Демо-версия Bootply

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