10

I'm using Bootstrap 3. On large screens I want to have a sidebar on the left and the maincontent on the right. On small screens I want to have important blocks of the sidebar on top, then the maincontent, then the less important blocks of the sidebar. Is there a way to achieve that?

Here's a JS Bin showing the problem: http://jsbin.com/wibucopi/1/ and below is the current code (which, however, displays all sidebar content on top on small screens).

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

I've already played around with col-sm-pull/push-x, but I could only achieve that the whole sidebar is displayed below the maincontent on small screens.

I don't want to duplicate content and show / hide it with visible-XY, hidden-XY, as the page would get bigger and it feels just wrong.

It would be great to have a pure Bootstrap css solution, or at least a css only one (I wouldn't like to use js).

Christian
  • 1,663
  • 19
  • 33

1 Answers1

8

You could do something like this:

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;
}
Community
  • 1
  • 1
jme11
  • 17,134
  • 2
  • 38
  • 48
  • Thanks! This works great except for the case when the maincontent is shorter than the upper (red) sidebar. In that case the lower (green) sidebar is displayed below the maincontent. Do you think there is a way to fix that case too? – Christian Jul 28 '14 at 13:23
  • I've now updated the answer based on feedback by Michael Strelan. It now also works if the maincontent is shorter than the sidebar. – Christian Jun 24 '16 at 11:05