center-block and margin:0 auto is not working

Question

i have problem with this code the problem is i can't center the last block when it come down after resize the page i tried also with margin:0 auto but it;s not working with me here

the code which i tried with :

<div class="container">
    <div class="row">

  <div style="background:blue"class=" col-sm-4 col-xs-6 col-md-4 col-lg-4 ">

  3
  </div>
   <div style="background:black" class=" col-sm-4 col-xs-6 col-md-4 col-lg-4 ">
   2
   </div>
    <div style="background:red;" class=" center-block col-sm-4 col-xs-6 col-md-4 col-lg-4   ">
    1
    </div>
  </div>
</div>

and from jsfiddle

Answer 1

To center last column use xs-offset-3

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 alert-warning">3</div>
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 alert-danger">2</div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0 col-md-4 col-lg-4 alert-info">1</div>
  </div>
</div>

And add col-xs-offset.css to support on Bootstrap 3 offsets on XS sizes or see result on jsFIddle