Bootstrap row of col-sm-4 leaving a blank space at col-xs-6 -

i using bootstrap layout, having problem when going 3 columns @ col-sm-4 wanted 2 columns @ col-xs-6, it's leaving blank space after third item. idea how can solver, layout goes 3 columns 2 in xs size?

/** style illustrate issue */    .red {    background-color: red;  }    .green{    background-color:green;  }    .blue{    background-color:blue;  }    .sample {    min-height: 100px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>      <div class="col-sm-4 col-xs-6 sample red">1</div>  <div class="col-sm-4 col-xs-6 sample blue">2</div>  <div class="col-sm-4 col-xs-6 sample green">3</div>

your columns must add 12. case "sm" settings (3x4 = 12), not "xs" settings.

in "xs" have 3x "50%" columns (col-xs-6) 3rd 1 go next line, leaving 50% blank space behind it.

if want 2 columns in "xs" size, have put 2 columns col-xs-6 , set col-hidden-xs on 1 of others hide one.