title: Why do divs go ladder while viewing on mobile?
body: <p>I am trying to mark up a cross-platform website. Now I am stuck with the email sending form.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div style="margin-left: 4%;"&gt;
      &lt;div class="caption"&gt;Имя &lt;span style="color: #B5FFC8;"&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;input class="field" type="text" name="first_name" maxlength="50"&gt;
      &lt;br&gt;&lt;br&gt;
  
      &lt;div class="caption"&gt;Фамилия &lt;span style="color: #B5FFC8;"&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;input class="field" type="text" name="last_name" maxlength="50"&gt;
      &lt;br&gt;&lt;br&gt;
  
      &lt;div class="caption"&gt;Е-мейл &lt;span style="color: #B5FFC8;"&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;input class="field" type="text" name="email" maxlength="50"&gt;
      &lt;br&gt;&lt;br&gt;
  
      &lt;div class="caption"&gt;Примечание &lt;span style="color: #B5FFC8;"&gt;*&lt;/span&gt;&lt;/div&gt;
      &lt;textarea class="comments" placeholder="Хочу фоток" name="comments" maxlength="140"&gt;&lt;/textarea&gt;
      &lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>.caption
  {
      font-size: 4vmin; 
      color: #FFFFFF; 
      font-family: font; 
      float: left; 
      width: 15%;  
  }
  .field
  {
      margin-left: 4%; 
      line-height: 4vmin; 
      font-size: 4vmin; 
      font-family: font; 
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      width: 40%;   
  }
  .comments
  {
      margin-left: 4%; 
      line-height: 4vmin; 
      font-size: 4vmin; 
      font-family: font; 
      box-sizing: border-box; 
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      width: 40%; 
      height: 20%; 
      resize: none;  
  }
  </code></pre>
  
  <p>This is how it (the form) looks on a PC: <a href="http://i.imgur.com/2iWgQqC.png" rel="nofollow">imgur</a></p>
  
  <p>And this is how it looks on a mobile: <a href="http://i.imgur.com/7oZS7k5.png" rel="nofollow">imgur</a></p>
  
  <p>Any solutions possible?</p>
  
  <p>Thanks in advance!</p>