col-xs-* not working when mobile is orienting between horizontal/vertical view in bootstrap 3

问题

I'm having a problem in Bootstrap 3 in using col-xs-* for mobile devices..

I'm using below code for mobile..

 <div class="row">
    <div class="col-xs-6"> div content 1 </div>
    <div class="col-xs-6"> div content 2 </div>
    <div class="col-xs-6"> div content 3 </div>
    <div class="col-xs-6"> div content 4 </div>
    <div class="col-xs-6"> div content 5 </div>
    <div class="col-xs-6"> div content 6 </div>
 </div>

here, div's are equally(50%) sharing in both Mobile Horizontal/Vertical views..

But I want to get 3 div blocks in mobile Horizontal view & 2 blocks in Vertical view..

for this I tried below code also. But no Use...

  <div class="row">
    <div class="col-xs-6 col-sm-4"> div content 1 </div>
    <div class="col-xs-6 col-sm-4"> div content 2 </div>
    <div class="col-xs-6 col-sm-4"> div content 3 </div>
    <div class="col-xs-6 col-sm-4"> div content 4 </div>
    <div class="col-xs-6 col-sm-4"> div content 5 </div>
    <div class="col-xs-6 col-sm-4"> div content 6 </div>
 </div>

please check below jpg's for ref:

Please help me in this..

回答1:

You need to adjust the break point for the col-sm-x classes. In bootstraps CSS file, you will find a line like:

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, ....

Change the 768px to wherever you want the break point where those classes to be overridden by the col-xs-x classes.

来源：https://stackoverflow.com/questions/23469251/col-xs-not-working-when-mobile-is-orienting-between-horizontal-vertical-view-i