Responsive Design - Rearrange element positions wi

问题:

I would like to do this without JavaScript if possible:

I will have 2 or more elements on a page that I want to change the order of when the page is a certain size. I am using media-queries and will serve different css based on screen size. Div "a" should be at the top normally, but if the screen size is under 480px then b should be directly over a.

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

The CSS that I must keep in my mobile.css:

.myDivs {
  width: 100%;
}

So the height is not specified; therefore, I can't simply position absolute and set margin-top or top.

回答1:

You're talking about source-order independence in terms of presentation. The bad news is that as of today, you're kind of out of luck without getting super kludgy (read: moving the DOM around with JS or something similar). The good news is that help is on the way in the form of CSS Flexbox - check out "ordering" on that page.

Other resources:

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

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

回答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>

Use table layout in CSS to rearrange the divs.

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

The elements will display in this order: Child 3, Child2, Child1

Fiddle is located here: http://jsfiddle.net/lockedown/gyef3vj7/1/

回答3:

This one may do the trick but will maybe have drawbacks...

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/

回答4:

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

With FlexBox - tested on iPad iOS7 this will reverse the two columns.

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

I'm using Modernizr so I can easily test for non-flexbox support by removing the 'flexbox' class from my HTML tag's classes.

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

Note: I am very new to Flexbox and these may not be all the correct prefixes needed now or into the future, but I've tested on my iPad and that's the main target for me for this and it works beautifully. See also CSS Flexible Box Layout on iPad