Responsive Bootstrap - changing number of divs per row from desktop to mobile - css

Question

New to responsive bootstrap here. I have 2 div's per row and 2 rows showing on my desktop. I used display: inline-block (see below link):
https://jsfiddle.net/9ya7kb67/
HTML:
<div class="parent">
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
</div>
CSS:
.parent {
width: 200px;
}
.child {
display: inline-block;
width: 80px;
}
However, I'd like to keep this layout in desktop but change it to 1 div per row (for 4 rows) on mobile using responsive bootstrap. How can I do this?

Answer 1

Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete
There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site.
<div class="row">
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
<div class="col-xs-12 col-md-6">Test col</div>
</div>
I didn't exactly understand what your end goal is, but the code above is something similar to what you want. On small screens col-xs-12 will fill the entire row, on medium to large screen you will have two col-md-6 on each row. Make sure to read the bootstrap documentation to learn more about it.