I'm using [PhoneGap](http://phonegap.com/) to build webpages into applications which are created using [Twitter Bootstrap](http://getbootstrap.com/) and [Flat UI](http://designmodo.com/demo/flat-ui/). 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. 

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. 

```
    <div class="row">
        <div class="col-md-6">
            <a href=".\back.html" class="btn btn-block btn-lg btn-success">BACK</a>
        </div>
        <div class="col-md-6">
            <a href=".\next.html" class="btn btn-block btn-lg btn-inverse">NEXT</a>
        </div>
    </div>

```

Also, at the top I have declared:

```
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

```

Any idea's as to why this is happening?

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.