Bootstrap and phone orientation - not switching from col-xs-6 to col-sm-4

I am using the default bootstrap in DW CC 2017,

I am testing it with my phone whose resolution is: 540 pixels by 960 pixels.

When i hold the phone vertically col-xs-6 presents 2 thumbs across the screen

The problem is that when i turn the phone horizontally, it dose not switch to col-sm-4 and instead of 4 thumbs i get 2 large ones.

Why is that and how to fix this?

I use the default breakpoints:

1200, 992 & 768px

my basic code structure is:

<div class="container-fluid">

  <section  class="row">

    <div class="col-lg-offset-1 col-lg-10">

         <div class="row">

           <article class="col-xs-6 col-sm-4 col-md-3">

              <div><a href="#" class="thumbnail"><img src="#"  alt=""/></a>

               <h2>Thumb1</h2>

               <p>This is a smaple text</p>

              </div>

           </article>

           <article class="col-xs-6 col-sm-4 col-md-3">

              <div><a href="#" class="thumbnail"><img src="#"  alt=""/></a>

               <h2>Thumb1</h2>

               <p>This is a smaple text</p>

              </div>

           </article>

           <article class="col-xs-6 col-sm-4 col-md-3">

              <div><a href="#" class="thumbnail"><img src="#"  alt=""/></a>

               <h2>Thumb1</h2>

               <p>This is a smaple text</p>

              </div>

           </article>

        </div>

       </div>

     </section>

</div>