title: Responsive Web Design float position
body: <p>I am trying to achieve the following in a two column float css design</p>
  
  <p><img src="https://i.stack.imgur.com/Wz8sz.jpg" alt="enter image description here"></p>
  
  <p>My css for the two is this:</p>
  
  <pre><code>.div1 {
   width: 25%;
   float:left;
  }
  
  .div2 {
   width: 75%;
   float: right;
  }
  
  .container {
   width:960px;
  }
  
  @media screen and (max-width: 320px) {
   .div1, .div2 {
   width: 100%;
   display: block;
   float: none;
   clear: both;
   }
   .container {
    width: 100%;
   }
  }
  </code></pre>
  
  <p>my html is this:</p>
  
  <pre><code>...
  &lt;div class="container"&gt;
   &lt;div class="div1"&gt;
   ... content inside
   &lt;/div&gt;
   &lt;div class="div2"&gt;
    &lt;img src="photo_loc"/&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have Div I and Div II. Div I is 25% width and Div II is 75% width. When I go to 320px (iphone portrait) using responsive design Div II goes below Div I, which I assume is the normal process.</p>
  
  <p>What I am trying to do is have Div II above Div I using floats, how can this be achieved through css?</p>