2

如果可能的话，我想在没有 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%;
}

所以没有指定高度；因此，我不能简单地定位绝对并设置边距顶部或顶部。

4

4 回答 4

6 
 <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/

于 2014-10-06T19:04:21.703 回答
5

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

于 2013-03-01T15:59:35.343 回答
2

这个可能会奏效，但可能会有缺点......

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/

于 2013-03-01T16:21:42.840 回答
0 
<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 上进行了测试，这是我的主要目标，它工作得很好。另请参阅iPad 上的 CSS 灵活框布局

于 2014-05-16T20:33:44.320 回答