переустанавливайте div-боксы после определенной точки останова

Question

В моем макете есть нечетная часть с изображением на левой стороне и некоторый текст для копирования с правой стороны. Следующий раздел (четный) с копией на левой стороне, а изображение с правой стороны (и так далее ...)

Теперь, после точки останова (для мобильных устройств), я хочу, чтобы текст был первым а затем изображение ... и т. д. ... Как я могу перевернуть поля div (так, чтобы изображение всегда было ПОСЛЕ КОПИРАЦИИ КОПИРА? Как я могу управлять этим с помощью CSS?

До сих пор я мог управлять этим после останова каждый ДИВ составляет 100% процентов, но, как и что расположение остается неизменным с курса ...

большое спасибо за помощь!

Вот мой Код:

* {box-sizing: border-box; margin: 0; padding: 0;} 

#wrap {max-width: 960px; height: 2120px; margin: 0 auto; background-color: gray;} 

.even {background-color: orange;} 

.odd {background-color: skyblue;} 

.pic, .copy {height: 200px; margin: 4% 3%;} 

.copy {background-color: pink;} 

@media screen and (min-width:320px) {.pic, .copy {width: 100%;}} 

@media screen and (min-width:668px) {.pic, .copy {width: 44%; float: left;}} 

<div id="wrap"> 
    <section class="odd"> 
    <div class="pic">IMAGE</div> 
    <div class="copy">TEXT</div> 
    </section> 
    <section class="even"> 
    <div class="copy">TEXT</div> 
    <div class="pic">IMAGE</div> 
    </section> 
    <section class="odd"> 
    <div class="pic">IMAGE</div> 
    <div class="copy">TEXT</div> 
    </section> 
    <section class="even"> 
    <div class="copy">TEXT</div> 
    <div class="pic">IMAGE</div> 
    </section> 
</div> 

Answer 1

Вот исправление: http://codepen.io/gilalberto/pen/pyRBwQ

Я изменил HTML, чтобы быть на нужном порядке для мобильных устройств (копировать, а затем изображения) и для рабочего стола, я добавил правило:

@media screen and (min-width:668px) { 
    .odd .copy { 
    float: right; 
    } 
} 

Итак, в нечетном тексте переместите текст вправо.

Также я добавил clearfix для поплавков, есть ссылка и комментарии в кодефене.

Попробуйте сделать работу с HTML, CSS и JS первой для мобильных устройств, а затем внесите изменения с помощью медиа-запроса или JS для рабочего стола. Разработка Mobile-first станет реальной при разработке адаптивных моделей http://zellwk.com/blog/how-to-write-mobile-first-css/