Is it possible to choose the stacking order of spans?

Question

I'm starting a project with Twitter Bootstrap, and quite like the responsive css, making the spans stack on top of each other when the viewport gets smaller.

Given the following design: http://jsfiddle.net/kJp6J/1/

Is it possible to choose which block will be stacked first on small screens? In my case, I'd like the block on the right to appear first, followed by the blocks on the left.

Is there a way to do this?

Answer 1

HTML

Wrap your content with .container, put that big block on the first place, add .pull-right so it will appear right:

<div class="container">
  <div class="row">
    <div class="span4 pull-right">
      <img src="http://placehold.it/280x180">
    </div>
    <div class="span8">
      <!-- ... -->
    </div>
  </div>
</div>

CSS

When on mobile, place it where it should be with float:none:

@media (max-width: 767px) {
  [class*="span"].pull-right {
    float: none;
}

Here's fiddle, I'll hope it works like you want it.