html - 在某个断点后重新排列 div 框

Question

我的布局有一个奇怪的部分，左侧是图像，右侧是一些复制文本。以下部分(甚至)是左侧的副本和右侧的图像(依此类推...)

现在，在断点之后(对于移动设备)，我希望先是文本，然后是图像……等等……我怎样才能翻转 div 框(这样图像总是在复制 div 框之后？怎么能我用 CSS 管理这个？

到目前为止，我可以管理在断点之后每个 div 都是 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;
  }
}

所以，在 odd 中会将文本向右移动。

我还为 float 添加了一个 clearfix，codepen 中有一个链接和注释。

尝试先让 HTML、CSS 和 JS 为移动设备工作，然后再为桌面设备使用媒体查询或 JS 进行更改。移动优先开发，在开发响应式设计时会非常方便 http://zellwk.com/blog/how-to-write-mobile-first-css/