css - Make box responsive -

i built 2 blocks. first block ("our best offers") not responsive on mobile device , second block ("our recommedations") responsive. first block spans whole row on devices (!). html code both blocks correct fits rest of layout perfectly, , need container , row first block. how first block responsive because think should way coded (?)?

fiddle ... fiddle

html

<div class="well">         <div class="container">             <div class="row">                 <div class="col-sm-12">                     <div class="add_box">                         <h1 class="add_heading">our best offers</h1>                     </div>                 </div>             </div>           </div>     </div>   <div class="col-sm-12">             <div class="well recommend">                 <div class="add_box">                     <h1 class="add_heading">our recommendations</h1>                 </div>             </div>         </div> 

css:

.well {     position:relative;     display:block;     background-color:#6478e8;     text-align:left;     border-style:solid;     border-radius:0;     border-width:0  } 

i can't see problem mention in fiddle provide (i can't see bootstrap's css matter, guess fiddle not complete), should keep in mind according bootstrap's model columns should nested inside row, should in turn nested inside container (or container-fluid if want take screen's width). see bootstrap documentation containers, grid system.

this means second html block should updated to:

<div class="container">     <div class="row">         <div class="col-xs-12">             <div class="well recommend">                 <div class="add_box">                     <h1 class="add_heading">our recommendations</h1>                 </div>             </div>         </div>     </div> </div> 

you can of course use same container both wells, ending this:

<div class="container">     <div class="row">         <div class="col-xs-12">             <div class="add_box">                 <h1 class="add_heading">our best offers</h1>             </div>         </div>     </div>     <div class="row">         <div class="col-xs-12">             <div class="well recommend">                 <div class="add_box">                     <h1 class="add_heading">our recommendations</h1>                 </div>             </div>         </div>     </div> </div> 

you notice in example have updated col-sm-12 col-xs-12. because bootsrap's logic define column styles smaller viewport (xs) , override them larger viewports if required. using col-sm-12 result expect, since default div take full width available it, have left column size undefined small viewports, bit inconsistent.

do note bootstrap has own well css class suggest either use bootstrap's well or rename custom class in order avoid clashing bootstrap's css , coming across new problems in future.