title: Bootstrap layout on smaller screens
body: <p>I'm using <a href="http://phonegap.com/" rel="nofollow">PhoneGap</a> to build webpages into applications which are created using <a href="http://getbootstrap.com/" rel="nofollow">Twitter Bootstrap</a> and <a href="http://designmodo.com/demo/flat-ui/" rel="nofollow">Flat UI</a>. Everything seems to be working fine but I am having one issue. When I test the webpage on my desktop or laptop the layout is fine, divided in the 12 sections, but when I attempt to have either images or buttons on the same row on the phone layout, they are placed vertically on top of the other. </p>
  
  <p>For example, if I have two buttons on one row, both buttons will be stretched to the width of the phone and placed on two separate rows. </p>
  
  <pre><code>    &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;a href=".\back.html" class="btn btn-block btn-lg btn-success"&gt;BACK&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;a href=".\next.html" class="btn btn-block btn-lg btn-inverse"&gt;NEXT&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Also, at the top I have declared:</p>
  
  <pre><code>    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>Any idea's as to why this is happening?</p>
  
  <p>One thing I wanted to do was have 6 boxes numbered 1-6 that the user could select from. I wanted to have 2 numbers per row and to have 3 rows. When I tried to implement the images (numbered boxes) in this way, they were stretched again and there ended up being 6 rows and massive boxes.</p>