title: How to allign labels in one div and corresponding textboxes in other?
body: <p>How to make responsive site in which labels in one div and corresponding text box in other. I have written a small piece of code.Its working(for md device) but when window size is resized its format is not correct(Both labels are clubbed together).How to correct this (for xs devices)? PFB the screenshot.
  <img src="https://i.stack.imgur.com/b2CpP.png" alt="sample.bmp"></p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
            &lt;form role="form"&gt;
  
  
              &lt;div class="row"&gt;
                &lt;label class="col-md-4 col-xs-12" for="TextArea"&gt;Text Area&lt;/label&gt;
                &lt;label class="col-md-4 col-xs-12" for="TextArea"&gt;Text Area&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-4 col-xs-12"&gt;
                  &lt;textarea class="form-control" id="TextArea"&gt;&lt;/textarea&gt;
                &lt;/div&gt;
                &lt;div class="col-md-4 col-xs-12"&gt;
                  &lt;textarea class="form-control" id="TextArea"&gt;&lt;/textarea&gt;
                &lt;/div&gt;                  
              &lt;/div&gt;
  
            &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;     
  </code></pre>