Responsive Design, comment changer l'ordre de div conteneurs?

Je commence tout juste avec le responsive webdesign. J'ai un 2 colonne mise en page (barre latérale et le contenu).

  <div class="main-container">
        <div class="main wrapper clearfix">
    <div class="con1">      
               <header>
                    <h1>container 1 h1</h1>
                    <p>text1</p>
                </header>
                <section>
                    <h2>overview section h2</h2>
                    <p> test</p>
                </section>

  </div>
  <div class="con2">
                <header>
                    <h1>container 2 article header h1</h1>
                    <p></p>
                </header>
                <section>
                    <h2>article section h2</h2>
                    <p>text</p>
                </section>
            </div>

            <aside>
                <h3>aside</h3>
                <p>text</p>
            </aside>

        </div> <!-- #main -->
    </div> <!-- #main-container -->

Le contenu obtenu 2 div conteneur. Sur un petit écran, je veux

Div1

Div2

Sur un grand écran, je veux qu'ils sont inversées,

Div2

Div1

Dans mon CSS j'ai maintenant la suite des Requêtes de Média:

 @media only screen and (min-width: 768px) {
 .main div.con1 {
    float: right;
    width: 57%;
}

.main div.con2 {
    float: right;
    width: 57%;
}

Est-il possible de permuter l'ordre autour de et si oui, comment puis-je le faire? Quelqu'un a peut-être un lien vers un bon tuto?

Merci beaucoup d'avance !

OriginalL'auteur Luka | 2012-10-11