title: How to change horizontal block-level elements to vertical elements after specific width?
body: <p>I have three <code>&lt;div&gt;</code> that are next to each other (horizontally). Now I want to change them to following each other (vertically) after this:</p>
  
  <pre><code>@media (max-width: 519px) { // all elements get vertical position }
  </code></pre>
  
  <p>By default, they will be under each other step by step, But I want to all elements following each other at the same time. Also here is a <a href="http://jsfiddle.net/r65x2a37/" rel="nofollow">fiddle</a>, you can change the width of page and you will see in first <code>&lt;div3&gt;</code> will be break down, and if you reduce the width of page more, you will see <code>&lt;div2&gt;</code> will be break down too. While I want to both of them be break down at the same time <em>(responsive - like a grid)</em>.</p>
  
  <p>How can I do that?</p>
  
  <hr>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="one"&gt;div1&lt;/div&gt;
  &lt;div class="two"&gt;div2&lt;/div&gt;
  &lt;div class="three"&gt;div3&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.one,.two,.three{
      border: 1px solid;
      float: left;
      margin: 5px;
      width: 25%;
      text-align: center;
      padding: 15px;
  }
  
  @media (max-width: 519px) { 
      .one,.two,.three{
          border: 1px solid red;
      }
  }
  </code></pre>