Bootstrap container with content and facebook buttons on the side

I use bootstrap and have all my content in a container; this centers all the content just the way i want it. The problem is that i also want a fixed bar on the right side with width 250px with facebook like button and maybe some text.

What i also want is that when i re-size the browser to mobile view the whole right bar will appear on the bottom right after the container.

I have tried to make rows around the containers but that did not work work

<div class = "row" >
   <div  class = "col-sm-6 col-md-4">
      <div class ="container">
        ...
      </div>
   </div>

   <div  class = "col-sm-6 col-md-4">
      <div class ="container">
        ...
      </div>
    </div>
</div>

I also tried to float a div to the right, but that wont work in the mobile view..

I have googled this for hours, downloaded webpages to see source code, and tried a lot of things i cant even remember with no result. Does anyone have an idea?

I can see that my question might be a bit unclear. And i see that my code attempts are rubbish. But i found a solution:

<div class = "container">
    <div class = "row">
       <div class = "col-lg-9">
           <div class = "panel panel-default">
               <div class = "panel-body">
                 Main content
               </div>
           </div>
       </div> 

       <div class = "col-lg-3">
           <div class = "list-group">
            Side Bar Content
           </div>
       </div>
     </div>
</div>

This will make a main content container with a bar on the side for different elements.