This is an example of how to change the html source order using css3's display: box; box-orient (you can either assign vertical or horizontal), and box-ordinal-group: 1, box-ordinal-group: 2; etc. You can also see a better example at http://www.jordanm.co.uk/lab/contentchoreography

HTML 1

/*source-order.css*/
.middle-content > .main-content {
        display:box;
        display:-moz-box;
        display:-webkit-box;
        box-orient:vertical;
        -moz-box-orient:vertical;
        -webkit-box-orient:vertical;
     }
     .middle-content > .main-content > .span4{
        box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -webkit-box-ordinal-group: 2;
     }
     .middle-content > .main-content > .span8 {
        box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -webkit-box-ordinal-group: 1;
     }

source-order.html

<div class="row-fluid main-content">
                <div class="span4 left-rail">
                    <div class="row-fluid">
                        <ul class="nav nav-list">
                            <li class="nav-header">About Us </li>
                            <li><a href="level-2-overview.html">Overview & Background</a> </li>
                            <li><a href="level-2.html">Organization</a> </li>
                            <li><a href="#">Strategic Initiatives</a> </li>
                            <li><a href="#">News & Events</a> </li>
                            <li class="no-border-bottom"><a href="#">Contact Us</a> </li>
                        </ul>
                    </div>
                    <!-- Beta Site Progress Bar -->
                    <div class="row-fluid blue-box">
                        <div class="span12">
                            <div class="row-fluid">
                                <p class="beta-p">
                                    beta.SAMHSA.gov is</p>
                                <p class="complete-p">
                                    <span>20%</span> complete</p>
                            </div>
                            <div class="row-fluid">
                                <div class="span10 offset1">
                                    <img src="_assets/img/samhsaprogressbar.png" alt="" />
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span12">
                                    <a href="#">Learn more about SAMHSA beta site</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid light-blue-box">
                        <div class="span12">
                            <div class="row-fluid">
                                <div class="span2 offset1 bubbles">
                                    <img src="_assets/img/questionbubles.png" alt="" />
                                </div>
                                <div class="span8">
                                    <div class="row-fluid">
                                        <div class="span12">
                                            <p class="speak-p">
                                                <span>Speak Up</span></p>
                                            <p class="listening-p">
                                                <span>We're Listening.</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span12">
                                    <div class="row-fluid">
                                        <p>
                                            Let us know how we are doing.</p>
                                        <p>
                                            What can we do to serve you better?</p>
                                    </div>
                                    <div class="row-fluid">
                                        <div class="span10 offset1">
                                            <a href="#">Give your feedback today</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- This is markup for two column content -->
                <div class="span8 two-column-content">
                    <div class="row-fluid">
                        <h1>About Us</h1>
                    </div>
                    <div class="row-fluid">
                        <p>
                            Introduction/Snack. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                            do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                            sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                    <div class="row-fluid content">
                        <div class="span6">
                            <div class="row-fluid">
                                <img src="_assets/img/bginfo.png" alt="" />
                            </div>
                            <div class="row-fluid ">
                                <p class="orange-caption">
                                    Overview & Background</p>
                            </div>
                            <div class="row-fluid">                                
                                    <span class="orange-arrow">►</span>
                                    <p>
                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                         tempor incididunt ut labore.
                                    </p>    
                            </div>
                            <div class="row-fluid">
                                <ul class="nav nav-pills caption-links">
                                    <li><a href="#" class="first">Mission &amp; Vision</a> </li>
                                    <li class="divider">| </li>
                                    <li><a href="#">Budget</a> </li>
                                    <li class="divider">| </li>
                                    <li><a href="#">Staff Biographies</a> </li>
                                </ul>
                            </div>
                        </div>
                        <div class="span6">
                            <div class="row-fluid">
                                <img src="_assets/img/Org.png" alt="" />
                            </div>
                            <div class="row-fluid">
                                <p class="orange-caption">
                                    Organization
                                </p>
                            </div>
                            <div class="row-fluid">
                                <span class="orange-arrow">►</span>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore.
                                </p>
                            </div>
                            <div class="row-fluid">
                                <ul class="nav nav-pills caption-links">
                                    <li><a href="#" class="first">Organization Charts</a> </li>
                                    <li class="divider">| </li>
                                    <li><a href="#">Centers &amp; Office</a> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid content">
                        <div class="span6">
                            <div class="row-fluid">
                                <img src="_assets/img/Strat-info.png" alt="" />
                            </div>
                            <div class="row-fluid">
                                <p class="orange-caption">
                                    Strategic Initiatives</p>
                            </div>
                            <div class="row-fluid">
                                <span class="orange-arrow">►</span>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore.
                                </p>
                            </div>
                            <div class="row-fluid">
                                <ul class="nav nav-pills caption-links">
                                    <li><a href="#" class="first">Stategic Initiatives</a> </li>
                                </ul>
                            </div>
                        </div>
                        <div class="span6">
                            <div class="row-fluid">
                                <img src="_assets/img/News.png" alt="" />
                            </div>
                            <div class="row-fluid">
                                <p class="orange-caption">
                                    News & Events</p>
                            </div>
                            <div class="row-fluid">
                                <span class="orange-arrow">►</span>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore.
                                </p>
                            </div>
                            <div class="row-fluid">
                                <ul class="nav nav-pills caption-links">
                                    <li><a href="#" class="first">News & Events</a> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid content">
                        <div class="span6">
                            <div class="row-fluid">
                                <img src="_assets/img/Contact.png" alt="" />
                            </div>
                            <div class="row-fluid">
                                <p class="orange-caption">
                                    Contact Us</p>
                            </div>
                            <div class="row-fluid">
                                <span class="orange-arrow">►</span>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore.
                                </p>
                            </div>
                            <div class="row-fluid">
                                <ul class="nav nav-pills caption-links">
                                    <li><a href="#" class="first">Contact Us</a> </li>
                                    <li class="divider">| </li>
                                    <li><a href="#">Jobs &amp; Internships</a> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid content">
                        <p>
                            Last Updated 02/18/2013
                        </p>
                    </div>
                </div>
            </div>