Question: I have a 3 column row with three images using the bootstrap. Just like below.

|         |        |        |  

|         |        |        |  

|         |        |        |  

|         |        |        |  

|--------------------- |   

|         |        |        |  

|         |        |        |  

|         |        |        |  

|         |        |        |  

In smaller devices, I have problem where I could see only two column and one column with empty content. Is there anyway that I can join these two rows together and to get a 2x2 2x2 2x2 schema on smaller devices?

My markup 

```
<div class="row">
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
</div>
<div class="row">
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
 <div class="col-md-4 col-sm-4 col-xs-12"></div>
</div>

```

Answer: 
This will give you two columns on small devices and three columns on tablet and up. The `.clearfix` ensures that the columns clear their floats properly.

```
<div class="row">
  <div class="col-xs-6 col-sm-4"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix hidden-xs"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="col-xs-6 col-sm-4"></div>
</div>

```
Sure, you can put everything in a single row and use `col-xs-6` so that width switches to 50% on smaller screens..

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

```

**Demo:** <http://bootply.com/mHzFhOfWzQ>