Как увеличить ширину чувствительного div в Bootstrap 3?

Question

Я не могу увеличить ширину div в ответном макете Bootstrap. Мне нужно использовать двухколоночный макет, а левая одна фиксированная и правая одна жидкость (поле поиска), но последняя не расширяется. Кроме того, когда разрешение экрана становится меньше, div должны показывать один выше другого.

Это код:

<div class="columns-container"> 

    <div class="left-column"> 
       <center> 
    <img class="img-responsive" src="http://shades.powercommerce.es/images/pics/shades-retail-header_2.jpg" /> 
    </center> 
    </div> 

    <div class="right-column" > 
<div class="row"> 
    <div class="col-lg-6"> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search..." style="width:90%;"> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div> 
    </div> 
</div> 
    </div> 

И это CSS:

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

body { margin: 0 auto; } 

footer, header { position: relative; clear: both; } 

.left-column, .right-column, footer, header { border: 1px solid #ccc; padding: 1em; margin: .5em; } 

.nav { 
    list-style: none; 
    margin-left: 0; 
    margin-bottom: 0; 
    padding-left: 0; 
} 
.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 
.nav > li, 
.nav > li > a { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 

.inline-items { 
    margin-top: 0; 
} 

.inline-items li { 
    margin-left: 0; 
    border-left: 1px solid black; 
    padding-left: 10px; 
    padding-right: 10px; 
} 

.inline-items li:first-child { 
    margin-left: 0; 
    border: none; 
    padding-left: 0; 
    padding-right: 10px; 
} 

.inline-items li:last-child { 
    padding-right: 0; 
} 


/* MEDIA QUERIES */ 
@media screen and (min-width: 47.5em) { 

    .columns-container { 
    display:table;  
     width: 100%; 
     float: left; 
    } 

    .left-column { 
    width: 18.75em; 
    margin-right: -19.3em; 
    position: relative; 
    float: left; 
    display:table-cell;  
    } 
    .right-column { 
    display:table-cell;  
    margin-left: 20em; 
    float: left; 
    } 

Codepen

Answer 1

Вы можете сделать это:

.right-column { 
    width: 100%; 
    display:table-cell;  
    padding-left: 20em; 
    float: left; 
    box-sizing: border-box; 
    } 

Проверьте DEMO

Answer 2

Вы используете Bootstrap неправильно, используйте встроенные row и col- классов CSS.

В вашем примере:

<div class="row"> 
    <div class="col-lg-2 col-sm-12 left-column"> 
     <img class="img-responsive" src="http://shades.powercommerce.es/images/pics/shades-retail-header_2.jpg" /> 
    </div> 
    <div class="col-lg-10 col-sm-12 right-column"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search..." style="width:90%;"> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" type="button">Go!</button> 
      </span> 
     </div> 
    </div> 
</div> 

Используя этот способ, когда дисплей велик col-lg-2 и col-lg-10 будет использоваться делает левую колонку меньше, когда дисплей мал col-sm-12 класса будет использоваться, и обе колонки будут одного размера, один под другим.

UPDATE:

Я должен согласиться с @ AlexG замечанием, таблицы не должны использоваться для укладки и center тега был deprecated.