html - 响应式设计 - 使用 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%;
}

所以没有指定高度；因此，我不能简单地定位 absolute 并设置 margin-top 或 top。

Answer 1

 <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、 child 2、 child 1

Fiddle 位于此处:http://jsfiddle.net/lockedown/gyef3vj7/1/