Bootstrap column to extend out side of the contain

Question

im trying to use bootstrap for a site, but what i am trying to achieve to have to columns within a row col-sm-6. Where i want one column to be in an ordinary container and the other to have container fluid effect.

So it would one column as normal and the other column as full width. So far this has been difficult to do:

<div class="container">
  <div class="row">
    <div class="col-sm-6 first">

    </div>
    <div class="col-sm-6 second">

    </div>
  </div>
</div>

http://jsfiddle.net/8fyjtn09/

Answer 1

Do you know flex-box layout in CSS ?

As i understand your question, i believe that on wider screens you want to have first column fixed and second column should be responsive. And for a smaller screen you want the default bootstrap behaviour. If this is what you are looking for, i have created a simple fiddle. Please check that and let me know if this is helpful.

Here is the link : https://jsfiddle.net/YameenYasin/7zaxx06z/23/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
  <div class="row flexbox">
    <div class="first">

    </div>
    <div class="second">

    </div>
  </div>
</div>

.flexbox {
    display: -webkit-flex;
    -webkit-flex-flow: row; // Children elements will be in rows
    -webkit-flex-wrap: wrap;
    width: 100%;
}
.first
{
    border:1px solid red;    
    height:50px;
    width:200px;
}
.second{
    border:1px solid green;
    width:100%;  
    -webkit-flex: 1;
    height:50px;
}
@media (max-width: 767px) {    
    .flexbox {    
        -webkit-flex-flow: column;    
    }
    .first,.second{
        width:100%;
    }    

}

Answer 2

i think i figured it out, instead of using a normal container i would have to use container fluid as i said before but just an offset

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-offset-2 col-xs-4 first">

    </div>
    <div class="col-sm-6 second">

    </div>
  </div>
</div>