Full width two column layout in bootsrap 3 for mobile

Question

I want two column in mobile layout

<div class="row">
    <div class="col-md-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10    well">Main content</div>
</div>

Here is fiddle http://jsfiddle.net/52VtD/10168/

What I tried

@media screen and (min-width: 768px) {

.row{

 width: 100%;

} 
}

Right now 2nd columns comes under the first column in mobile

Answer 1

Try this
<div class="row">
    <div class="col-md-2 col-xs-2 col-sm-2">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    <div class="col-md-10 col-xs-10 col-sm-10   well">Main content</div>
</div>

Answer 2

Add classes for different sizes:

  <div class="row"> <div class="col-md-2 col-sm-2 col-xs-2"> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div> </div> <div class="col-md-10 col-sm-10 col-xs-10 well">Main content</div> </div> 

Answer 3

If you don't want that 'big gap' use something like nav-pills justified

example

<div class="row">
<div class="col-xs-2">
    <ul class="nav nav-pills nav-justified">
        <li type="button" class="btn btn-default">1</li>
        <li type="button" class="btn btn-default">2</li>
        <li type="button" class="btn btn-default">3</li>
    </ul>
</div>
<div class="col-xs-10">
    <div class="well">Main content</div>
</div>

Answer 4

Change those classes to col-xs-2 on the first column, and col-xs-10 on the second column, and it will work for all sizes of screen.

The reason your original code didn't work is because specifying col-md-2 and col-md-10 only gives you two columns for medium size screens (md) and larger. The mobile has been left to the Bootstrap default for small screen mobiles, which is to stack the columns above each other. Bootstrap column classes work from small to large in order, so md only covers medium and large.