title: CSS dynamic layout with mobile view versus normal view in 2 column layout
body: <p>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.</p>
  
  <p>I have the following image which represents my layout as it currently is.</p>
  
  <p><strong>Current page layout</strong></p>
  
  <p><img src="https://i.stack.imgur.com/hzgf2.jpg" alt="The current desktop layout"></p>
  
  <p>On mobile view this is the desired result:</p>
  
  <p><strong>Desired result</strong></p>
  
  <p><img src="https://i.stack.imgur.com/ULVDI.jpg" alt="The desired result"></p>
  
  <p>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.</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/20532575/two-column-layout-fixed-right-column">Two column layout, fixed right column</a></p>
  
  <p>I have provided with a JSfiddle <a href="http://jsfiddle.net/mdibbets/LgKP5/" rel="nofollow noreferrer">http://jsfiddle.net/mdibbets/LgKP5/</a> that replicates the situation.</p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div id="red"&gt;
      &lt;div id="yellow1"&gt;
          &lt;span&gt;1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="yellow2"&gt;
          &lt;span&gt;2&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="black"&gt;
      &lt;div id="green1"&gt;
          &lt;span&gt;1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="green2"&gt;
          &lt;span&gt;2&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="green3"&gt;
          &lt;span&gt;3&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="blue"&gt;
      &lt;div id="purple1"&gt;
          &lt;span&gt;1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="purple2"&gt;
          &lt;span&gt;2&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="purple3"&gt;
          &lt;span&gt;3&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>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%;
      }
  }
  </code></pre>
  
  <p>It's no problem getting the "green blocks" as a whole into the dynamic mode.
  But to "split" them is a whole different problem.</p>
  
  <p>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...</p>