title: Float a div to the right when screen is wide, stack when screen is narrow
body: <p>In the code below I want the following conditions to hold:</p>
  
  <ol>
  <li>The pink div always spans the viewport. </li>
  <li>The pink div's text is always centered in the viewport.</li>
  <li>The blue div floats to the right when the screen is "sufficiently wide."</li>
  <li>The blue div stacks below the pink div when the screen is not "sufficiently wide."</li>
  <li>The blue div spans the viewport and its text is centered when stacked.</li>
  <li>The solution should be pure CSS.</li>
  </ol>
  
  <p>Here's my current pass:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  #parent {
      position: relative;
      background-color: white;
      width: 100%;
      height:  20px;
  }
  #center {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      background-color: pink;
      text-align: center;
  }
  #placeholder {
      position: relative;
      height: 20px;
      width: 500px;
  }
  #right {
      position: relative;
      float: right;
      background-color: blue;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="parent"&gt;
      &lt;div id="center"&gt;This text should always be centered in the VIEWPORT&lt;/div&gt;
      &lt;div id="right"&gt;this text should float to the right&lt;/div&gt;
      &lt;div id="placeholder"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's what it currently looks like when the screen is wide (correct):</p>
  
  <p><img src="https://s21.postimg.org/3qqztewpz/wide.jpg" alt="wide"></p>
  
  <p>Here's what it looks like when the screen is narrow (incorrect):</p>
  
  <p><img src="https://s12.postimg.org/6l8dw0p7x/narrow.jpg" alt="narrow"></p>
  
  <p>Here's what it should look like when the screen is narrow:</p>
  
  <p><img src="https://s21.postimg.org/k35mww0fb/narrow_correct.jpg" alt="narrow goal"></p>