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

【问题标题】：Responsive Design - Rearrange element positions with css响应式设计 - 使用 css 重新排列元素位置
【发布时间】：2014-10-07 03:04:21
【问题描述】：

如果可能，我希望不使用 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。

【问题讨论】：

标签： html css media-queries

【解决方案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;
    }
}

元素将按以下顺序显示：孩子 3、孩子 2、孩子 1

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

【讨论】：

【解决方案2】：

您说的是在表示方面的源顺序独立性。坏消息是，到今天为止，如果没有变得超级笨拙（阅读：用 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/

【讨论】：

感谢您提供 Flexbox 信息。未来看起来很不错！
CSS Grids 也在开发中，虽然它现在只被 IE10 支持。查看24ways.org/2012/css3-grid-layout
注意旧文章使用过时的 css 属性名称，以及 IDE 中的 intellisense 不是最新的

【解决方案3】：

这个可以解决问题，但可能会有缺点......

CSS：

.child-1,.child-2 {
    width:100%;
}

.parent{position:relative;}


@media screen and (max-width:480px){
    .child-1{
       position: absolute;
       top: 100%;
    }
}

HTML：

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

演示：http://jsfiddle.net/pavloschris/pYkfK/embedded/result/

【讨论】：

这实际上非常棒——当屏幕很窄时，将下部元素定位在其容器元素的底部边缘。我不知道如何在页眉中使用它，因为降低的元素（在本例中为.child-1）与页面内容重叠，它应该在页眉下方，因为降低的元素被取出的布局流程。有没有办法解决这个问题？

【解决方案4】：

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

使用 FlexBox - 在 iPad iOS7 上测试，这将反转两列。

@media screen and (max-width: 480px)
{
   .parent 
   {
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: column-reverse;
       flex-direction: column-reverse; 
   }
}

我正在使用 Modernizr，因此我可以通过从 HTML 标记的类中删除“flexbox”类来轻松测试对非 flexbox 的支持。

.flexbox .parent 
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse; 
}

注意：我非常刚接触 Flexbox，这些可能不是现在或将来需要的所有正确前缀，但我已经在我的 iPad 上进行了测试，并且这是我的主要目标，而且效果很好。另见CSS Flexible Box Layout on iPad

【讨论】：