Адаптивный дизайн, как изменить порядок в контейнерах div? ⇐ CSS

[Anonymous]

Я только начинаю заниматься адаптивным веб-дизайном. У меня есть макет из двух столбцов (боковая панель и контент).

Код: Выделить всё

container 1 h1
text1


overview section h2
test



container 2 article header h1



article section h2
text



aside
text


 
 

Содержимое получило 2 контейнера div. На маленьком экране мне нужен

Div1

Div2

На большом экране я хочу, чтобы они поменялись местами,

Div2

Div1

В моем CSS теперь есть следующий медиа-запрос:

Код: Выделить всё

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

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

Можно ли поменять порядок, и если да, то как это сделать? Может быть, у кого-нибудь есть ссылка на хороший учебник?

Заранее большое спасибо!

Подробнее здесь: https://stackoverflow.com/questions/128 ... containers