Question

I’m using foundation framework 3.2.

My content area takes 9 columns and a side bar (on the right side) takes 3 columns.

When I view the page on mobile device, my content area is first on top, then below content area side bar follows. That is of course the default grid behavior and works as expected.

Instead that, I would like to render side bar first and then below, content area.

Would that be possible?

Thanks!

Answer 1

I’ve used similar technic for Bootstrap (it’s framework-independent). I suppose you have a markup like this:

​<div class="row">
  <div class="nine columns content">
      <h1>Content</h1>
  </div>
  <div class="three columns sidebar​​">
      <h1>Sidebar</h1>
  </div>
</div>

Put the sidebar on a first place:

<div class="row">
  <div class="three columns sidebar">
      <h1>Sidebar</h1>
  </div>
  <div class="nine columns content">
      <h1>Content</h1>
  </div>
</div>

Then float it right:

.sidebar {
  float: right;
}

On mobile reset the float:

@media only screen and (max-width: 767px) {
  .sidebar {
    float: none;
  }
}

Check out how it works.