4 column responsive in Bootstrap

Question

I want to make a row with 4 columns. When the user uses a tablet the row will have 2 columns and the remaining 2 will jump under the row.

Then when the user uses mobile the row will have 1 column and the other columns will jump under each other.

Can you help me with this? I've tried this:

    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    </div>

Answer 1

The issue seems to be the margin or border that you may have to those for divs. Also you always have to wrap them in a <div class="row">

give all of them a single class (say "bootCols") and add this css:

.bootCols{
    margin:0;
    box-sizing:border-box;
    padding:5px;
    border:2px solid auto;
}

you can remove/edit padding and border in this css as you require

Here's live example:

.bootCols{
  height:100px;
  margin:0;
  box-sizing:border-box;
  padding:5px;
  border:2px solid black;
  background-color:red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 bootCols">
      </div>
    </div>
  </div>