manipulation of column and row on bootstrap in mobile view

问题

I have two rows and three columns like this

[1] [2] [3]

[4] [5] [6]

I want they look like this when I change to mobile view

[1] [2]

[3] [4]

[5] [6]

I've tried it, but when I change to mobile view, they turn out like this

[1] [2]

[3]

[4] [5]

[6]

how to manipulate row and column? Thanks.

回答1:

Probably, you are using two rows that's why you are getting this result. Put all of them in one row and add clearfixes for special sizes.

<!-- columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">1</div>
  <div class="col-xs-6 col-md-4">2</div>

  <div class="clearfix visible-xs-block"></div> <!-- It works on mobile view -->

  <div class="col-xs-6 col-md-4">3</div>

  <div class="clearfix visible-md-block"></div> <!-- It works on desktop view -->

  <div class="col-xs-6 col-md-4">4</div>

  <div class="clearfix visible-xs-block"></div> <!-- It works on mobile view -->

  <div class="col-xs-6 col-md-4">5</div>
  <div class="col-xs-6 col-md-4">6</div>
</div>

Now, you will have:

[1] [2] [3]

[4] [5] [6]

for desktop view and

[1] [2]

[3] [4]

[5] [6]

for mobile view.

来源：https://stackoverflow.com/questions/35671485/manipulation-of-column-and-row-on-bootstrap-in-mobile-view