When using Bootstrap, each row is divided into 12 columns. The col-xs-* class is used for phones with a screen size of less than 768px. If you want to learn more about how the grid system in Bootstrap works, check out this tutorial or this one at Scotch.io. For a demo mockup example based on your code, you can view it live on LiveOnFiddle. Remember that this is just a mockup and there are plenty of CSS tricks you can use to customize your layout using media queries.
To get you started, here is an example of the CSS code you might use:
html,body{
max-width:100%;
}
.row {
margin: 5px
}
.border {
border: 1px solid black;
height: 100px;
line-height: 1;
}
.top-box {
height: 50px;
}
.small {
width: 36%;
height: 45px;
display: inline-block;
text-align: center;
line-height: 1;
margin-top: 26px;
}
.slide-banner {
height: 50px;
}
.small-right {
width: 20%;
height: 50px;
margin-top: 5px;
float: right;
}
@media (max-width:535px) {
.small {
margin-top: 15px;
}
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="row">
<div class="border col-xs-3">box on the right #1</div>
<div class="border col-xs-3">box on the right #2</div>
<div class="border top-box col-xs-3">
<p>
box on the right #3
</p>
<span class="border small ">small under box3 </span>
<span class="border small ">small under box3</span>
</div>
<div class="border col-xs-3">box on the left #4</div>
</div>
<!--bottom row--->
<div class="row">
<div class="border col-xs-3">box on the left</div>
<div class="border slide-banner col-xs-8 col-xs-offset-1">place for sliding banner</div>
<span class="border small-right">small box bottom right</span>
</div>