CSS dynamic positioning of 6 blocks

Question

I just asked a question concerning the dynamic CSS positioning of three blocks as the screen size changes. I tried to simplify the situation before I posted and now I feel an idiot because I've just realised that what I actually need is six blocks:

enter image description here

<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
<div class="block">D</div>
<div class="block">E</div>
<div class="block">F</div>

The 3 block solution doesn't work here because I can't wrap A+B, C+D, E+F in divs and also wrap A+B+C and D+E+F. It would require overlapping <div>s. What do I do? Please help!

My ideal solution would be pure CSS (media queries) or minimal Javascript (pref. no libraries).

EDIT: To be clear, what I'm after is a solution that dynamically changes the layout of the boxes (as per the diagram above) when the screen width changes.

Also, I don't want:

AB       ABC
CD       DEF
EF

I shared one before - but this still works if you keep adding boxes - http://codepen.io/evanrbriggs/pen/cpwoj Is there a set width on these boxes? — Evan, Aug 07 '14 at 20:37
@Evan, The order of those blocks in your code isn't the way I want it. I don't want AB across the top. — ᴇʟᴇvᴀтᴇ, Aug 07 '14 at 20:38

score -1 · Answer 1 · answered Aug 07 '14 at 20:40

What about using Bootstrap's or Foundation's grid system?

If bootstrap:

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">
        <div class="block">A</div>
        <div class="block">B</div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="block">C</div>
        <div class="block">D</div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="block">E</div>
        <div class="block">F</div>
    </div>
</div>

I want the screen to change dynamically, not just position things in a fixed grid. — ᴇʟᴇvᴀтᴇ, Aug 07 '14 at 20:41

CSS dynamic positioning of 6 blocks

1 Answers1