Hi,

Finding this a bit tricky to achieve and wondered if anyone thinks its possible.

I'm looking to generate a list of divs which when selected show another div (easy bit jQuery.show) but its the positioning i'm getting stuck with, the following examples will probably describe what I'm trying to achieve better than talking about it.

Options set to be col-md-3 col-sm-4 col-xs-6

[lg/md media]
| Option 1 | Option 2 | Option 3 | Option 4 |
When 1/2/3/4 clicked I want to show a div here relevant to the option
| Option 5 | Option 6 | Option 7 | Option 8 |
When 5/6/7/8 clicked I want to show a div here relevant to the option

[sm media]
| Option 1 | Option 2 | Option 3 |
When 1/2/3 clicked I want to show a div here relevant to the option
| Option 4 | Option 5 | Option 6 |
When 4/5/6 clicked I want to show a div here relevant to the option
etc

| Option 1 | Option 2 |
When 1/2 clicked I want to show a div here relevant to the option
| Option 3 | Option 4 |
When 3/4 clicked I want to show a div here relevant to the option
etc

I can get it to behave like the following if I just set the hidden div to always have a width of 12 (example if 2 clicked)
| Option 1 | Option 2 |
Option 2 Displayed div
| Option 3 | Option 4 | Option 5 | Option 6 |
| Option 7 | Option 8 |

So is this achievable? I was thinking I could use jquery insert the html from another hidden div somewhere but how can I work out how many options I have appearing across the screen based upon the size of the media?

Little stumped so any help or hint in the right direction would be great.

Cheers