-3

I have a responsive design site that has an odd layout changed after a media query that needs me to reorder the layout of some items: Basically I have 4 sections, a, b, c, d So A is a left column B is a right column and c and d are their own rows below (* means a new line) * A | B * C * D then I need to have it reordered to 4 distict rows in this order * A * C * B * D I can use Javascript jQuery to reorder things, but would prefer to now rely on that, so I am looking for an all CSS solution, PHP solution, and finally if all is not possible Javascript/jQuery solution.

Bob Cahill
  • 11
  • 2
  • 1
    Questions usually have a `?` in them. you're just listing a bunch of requirements, and this is not a programmers-for-hire board. – Marc B Oct 22 '12 at 16:03
  • 1
    It is also very difficult to make out precisely what you are describing, given the sparse punctuation. Could you improve that? – itsbruce Oct 22 '12 at 16:26
  • 1
    And if you're going to ask this type of question here, you should, at the very least, include some sort of sketch. – Jules Oct 22 '12 at 16:42

1 Answers1

2

Here you go

HTML:

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>​

CSS

#a { background-color: #aaa; }
#b { background-color: #bbb; }
#c { background-color: #ccc; }
#d { background-color: #ddd; }

div { 
    height: 100px;
    width: 100%;
}

@media 
  screen and (min-width: 420px) {
    div { position: absolute; }
    #a{ 
       width: 50%;
    }

    #b { 
      top: 100px;
    }

    #c {
      left: 50%;
      width: 50%;
    }

    #d { 
      top: 200px;
    }
}
​
Andy
  • 14,427
  • 3
  • 52
  • 76
  • I think he meant the opposite (two columns for wide displays, and four rows for narrow), but that's just a small adjustment so you get a +1 from me anyway ;) – xec Oct 22 '12 at 16:20
  • He wanted `ACBD`. Your example is `ABCD`. – Sampson Oct 22 '12 at 16:21
  • @JonathanSampson is right, but that also makes it tricky to do with css alone. relevant: http://stackoverflow.com/questions/220273 – xec Oct 22 '12 at 16:26
  • @JonathanSampson Updated my post to what he required, do I get your approval now? :D – Andy Oct 22 '12 at 16:27
  • @Andy He wants four rows, in the order of A, C, B, and D. Under certain conditions, he wants A and B to share the first row, followed by C and D. One other concern is that your new approach starts to require explicit heights for elements, and this creates problems of its own. – Sampson Oct 22 '12 at 16:58