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

时间:2016-03-18 16:25:14

标签: html css

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

现在,在断点之后(对于移动设备)我希望文本首先然后是图像...依此类推......如何翻转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>

1 个答案:

答案 0 :(得分:0)

以下是修复: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/

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