div goes down when page view 737 width w/ bootstrap

Question

i am stuck with this. I am working with the responsiveness of my custom site. I am using bootstrap. Why does my <div class="col-xs-4"> goes down in a view of 737x width. Here is the screenshot :

i want the boxes of image to be in the right side of the text. my image are inside of the <div class="col-xs-4"> Here is the jsfiddle: https://jsfiddle.net/DTcHh/26370/

here is my structure:

<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
  <div class="row row-left">
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
  </div>
  <div class="row row-left">
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
  </div>
</div>
</div>
</div>

my css:

.col-box2 img {
    width: 80%;
    height: auto;
}
.col-box2 {
   display:inline-block;
   float:none;
   text-align:left;
   margin-right: 3.6%;
   width: 15.6%;
   margin-bottom: 2%;
}
.row-left {
    margin-right: 0;
    text-align: left;
}

Answer 1

See if this helps you:
https://jsfiddle.net/panchroma/DTcHh/26371/

On line 3 and line 5 of your HTML you had

<div class="col-md-4">

and

<div class="col-md-8">

but when they collapse it also affects their children, in this case your col-xs-4 elements

You'll see I've changed lines 3 and 5 of your HTML to

<div class="col-xs-4">

and

<div class="col-xs-8">

and all is good.

Answer 2

You can use col-xs property with col-md just like

Col-xs property work below 767px but if we use col-xs property then content will look shrink and you have to manage content css according to view.

If we use col-md property then content will look with 100% width in mobile device.