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

[karpiyon]

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>

[Nancy OShea]

Maybe because of the col-offset, I don't know. 

A URL to your online site would be more helpful so we could see what you're working with.

Nancy

[karpiyon]

thank you,

i do not have a site with bootstrap yet - this is what i am working on now...

But you think that it should work, correct?

I removed the offset and it is still not working

[BenPleysier · Accepted solution]

I think it may suit you to change the grid breakpoints. Have a look at using BootEditor | The Best Bootstrap Style Builder Software Ever

[karpiyon]

Thanks,

What breakpoints do you recommend?

Do you think that has anything to do with it? i doubt.

[BenPleysier]

I use the standard breakpoints, but added an extra ms breakpoint for small mobiles held in portrait. Unfortunately the code has been written in Sass which is probably outside of your cope. See bootstrap_ms.css.scss · GitHub

In your case I would start a test project with the standard breakpoints and adjust when necessary.