How to change number of columns in a row for different display sizes

Question

I have list of products:

<div class="row">
  <div class="col-md-4">Item1</div>
  <div class="col-md-4">Item2</div>
  <div class="col-md-4">Item3</div>
</div>

<div class="row">
  <div class="col-md-4">Item4</div>
  <div class="col-md-4">Item5</div>
  <div class="col-md-4">Item6</div>
</div>

How can I change it so for smaller displays (sm,xs) I'll have 2 items per row, and for larger (lg) 4 item per row ?

Answer 1

You can simply add more classes according to the viewport width:

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

The above gives you an output of 4 columns for larger viewports, 3 for medium and 2 for smaller.

Since a row can be comprised of 12 columns, assigning the value 6 appended to the class that corresponds to the breakpoint you want will give each column 50% of the row width.

To quote BootStrap directly:

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)

• Extra small devices Phones = col-xs-n
• Small devices Tablets = col-sm-n
• Medium devices Desktops = col-md-n
• Large devices Desktops = col-lg-n

EDIT - as per OP's comment if you want 2 columns side by side at smaller viewports, you'll need to add them all in the same row:

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

This will give you the following output at smaller viewports

Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6