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;
  }
}

因此，奇数会将文本移到右侧。

此外，我为浮动添加了一个clearfix，在codepen中有一个链接和注释。

尝试使HTML，CSS和JS首先用于移动设备，然后使用媒体查询或桌面JS进行更改。在开发响应式设计http://zellwk.com/blog/how-to-write-mobile-first-css/

时，移动优先开发将变得非常方便

在某个断点后重新安排div盒

1 个答案: