响应式设计 - 用css重新排列元素位置

Question

如果可能的话,我想在没有JavaScript的情况下这样做:

我将在页面上有2个或更多元素,我想更改页面大小的顺序.我正在使用媒体查询,并将根据屏幕大小提供不同的CSS.Div"a"应该正常位于顶部,但如果屏幕尺寸低于480px,那么b应该直接在a上.

<div id="a" class="myDivs">Top when on desktop</div>
<div id="b" class="myDivs">Becomes top when under 480px wide screen</div>

我必须在我的mobile.css中保存的CSS:

.myDivs {
  width: 100%;
}

所以没有指定高度; 因此,我不能简单地定位绝对值并设置margin-top或top.

Answer 1

你在谈论表达方面的源顺序独立性.坏消息是,截至今天,如果没有获得超级克隆,你会有点运气(阅读:用JS或类似的方式移动DOM).好消息是,CSS Flexbox形式的帮助即将到来 - 请查看该页面上的 "订购".

其他资源:

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes

http://css-tricks.com/old-flexbox-and-new-flexbox/

Answer 2

 <div class="parent">
    <div class="child-1">This is Child One</div>
    <div class="child-2">This is Child Two</div>
    <div class="child-3">This is Child Three</div>
 </div>

在CSS中使用表格布局来重新排列div.

@media screen and (max-width: 768px) {
    .parent { 
      display: table;
    }
    .child-3 {
      display: table-header-group;
    }
    .child-1 {
      display: table-footer-group;
    }
}

元素将按以下顺序显示:Child 3,Child2,Child1

小提琴位于:http://jsfiddle.net/lockedown/gyef3vj7/1/