My problem is the following. I have a two column layout. But what I want do do is kind of complicated and I haven't found a good tutorial/question here on stackoverflow which handled my problem accurately.
I have the following image which represents my layout as it currently is.
Current page layout
On mobile view this is the desired result:
Desired result
How to make sure that the first green block positions itself between the red and the purple block, but the second and third block positions itself underneath the purple block.
This is a problem because the second block is in an normal positioning beside the red block and locally ends up underneath the red block if I apply the solution of Two column layout, fixed right column
I have provided with a JSfiddle http://jsfiddle.net/mdibbets/LgKP5/ that replicates the situation.
The HTML
<div id="red">
<div id="yellow1">
<span>1</span>
</div>
<div id="yellow2">
<span>2</span>
</div>
</div>
<div id="black">
<div id="green1">
<span>1</span>
</div>
<div id="green2">
<span>2</span>
</div>
<div id="green3">
<span>3</span>
</div>
</div>
<div id="blue">
<div id="purple1">
<span>1</span>
</div>
<div id="purple2">
<span>2</span>
</div>
<div id="purple3">
<span>3</span>
</div>
</div>
The CSS
span
{
display:inline-block;
margin: 50px 50px;
font-size:4em;
font-weight:800;
text-shadow: 3px 3px 10px gray;
font-family:sans-serif;
}
#red {
background-color:red;
border: 1px solid brown;
display:inline-block;
}
#yellow1, #yellow2
{
background-color:yellow;
border: 1px solid lightbrown;
}
#black
{
display:inline-block;
border:1px solid black;
background-color:gray;
}
#green1, #green2, #green3
{
display:inline-block;
background-color:lime;
border:1px solid darkgreen;
}
#blue
{
display:inline-block;
border:1px solid darkblue;
background-color:lightblue;
}
#purple1, #purple2, #purple3
{
display:block;
border: 1px solid darkpurple;
background-color:purple;
}
/* desktops and big resolution screens that can handle the normal layout */
@media only screen and (min-width: 875px) {
#red {
width:600px;
}
#yellow1, #yellow2
{
width:250px;
height:300px;
margin:20px;
float:left;
}
#black
{
float:right;
}
#green1, #green2, #green3
{
clear:both;
float:right;
width:200px;
height:150px;
margin:20px;
}
#blue
{
width:600px;
}
#purple1, #purple2, #purple3
{
width:150px;
margin:25px;
float:left;
height:200px;
}
}
/* small screens */
@media only screen and (max-width: 875px) {
#red {
width:100%;
}
#yellow1, #yellow2
{
width:90%;
margin:5%;
float:left;
}
#black
{
width:100%;
}
#green1, #green2, #green3
{
width:90%;
margin:5%;
}
#blue
{
width:100%;
}
#purple1, #purple2, #purple3
{
width:90%;
margin:5%;
}
}
It's no problem getting the "green blocks" as a whole into the dynamic mode. But to "split" them is a whole different problem.
Is it possible to activate html code based on screen resolutions in the style of the IE conditional comments? That I can present a whole other set of HTML if screen resolution is...
