title: How to stack individual fields in 2 column form - Foundation 4
body: <p>I have a two column form and i want one of the fields in the 2nd column to stack under a field in the 1st column in the mobile view. This is currently what is happening in mobile view:</p>
  
  <p>First Name<br>
  Email Address<br>
  Account Number<br>
  Last Name<br>
  Contact Number</p>
  
  <p>but this is what I want it to do in mobile view:</p>
  
  <p>First name<br>
  Last Name<br>
  Email Address<br>
  Account Number<br>
  Contact Number<br></p>
  
  <p>Basically I want the last name to be under the first name field in mobile view. How do I achieve this? Im not able to show you the actual page..hopefully the code will help. I want it to work like the contact form on this page: <a href="http://fixate.it/contact/" rel="nofollow">http://fixate.it/contact/</a> how the email address field is underneath the name field in the mobile view (small view)</p>
  
  <p>Thank you :)<br><br></p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;!-- Shows --&gt;
          &lt;div class="large-6 small-12 columns"&gt; 
            &lt;div class="row"&gt;
                &lt;div class="large-12 column"&gt;
                   &lt;form&gt;
  
                        &lt;label&gt;First Name &lt;/label&gt;
                          &lt;input type="text"/&gt;
  
                        &lt;label&gt;E-mail Address&lt;/label&gt;
                          &lt;input type="text"/&gt;
  
  
                        &lt;label&gt;Account Number&lt;/label&gt;
                          &lt;input type="text"/&gt;
  
  
              &lt;/div&gt;
             &lt;/div&gt;
              &lt;/div&gt;  
  
              &lt;div class="large-6 small-12 columns"&gt; 
            &lt;div class="row"&gt;
              &lt;div class="large-12 column"&gt;
  
                    &lt;div class="row"&gt;
                      &lt;div class="large-12 columns"&gt;
                        &lt;label&gt;Last Name&lt;/label&gt;
                          &lt;input type="text"/&gt;
  
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                      &lt;div class="large-12 columns"&gt;
                        &lt;label&gt;Contact Phone #&lt;/label&gt;
                          &lt;div style="float:left; padding-right:11px;"&gt;&lt;select name="phonenumcountry" id="phonenumcountry" style="width:230px;" class="chosen" autocomplete="off"&gt;
                          countries
                          &lt;/select&gt;&lt;/div&gt;
                          &lt;div style="float:left;"&gt;&lt;input name="phonenum" id="phonenum" class="validate[required,funcCall[validateContactPhoneNumber]]" type="text" value=" " size="20" maxlength="16" onBlur="checkFullText4Numbers(this,event);setAsAccountNo();" onKeyPress="return numbersonly(this,event)" style="vertical-align: top;" placeholder="Area Code + Phone #"&gt;&lt;/div&gt;
  
  
                      &lt;/div&gt;
                    &lt;/div&gt;
  
              &lt;/div&gt;
  
             &lt;/div&gt;
  
              &lt;/div&gt;
  
  
      &lt;/div&gt;
  </code></pre>