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;
    }
}

元素将按以下顺序显示：孩子3，Child2，Child1

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

Answer 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>

DEMO：http://jsfiddle.net/pavloschris/pYkfK/embedded/result/

Answer 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，因此我可以通过删除＆＃39; flexbox＆＃39;轻松测试非Flexbox支持。我的HTML标记类中的类。

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

注意：我是非常新的Flexbox，这些可能不是现在或未来所需的所有正确的前缀，但我已经在我的iPad，这是我的主要目标，它的工作非常精彩。另请参阅CSS Flexible Box Layout on iPad

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

4 个答案: