Here is the code snippet I am working with:
<div class='carousel'>
<div class='data-ng-repeat='{{ repeat }}'{% endif %}>
<div class='col-xs-12 col-sm-3 vdivide valign-wrap' data-ng-repeat='i in items'>
<div class='valign'>
<p class='body'>
<span> {$ i.statistic $} </span>
<span> {$ i.text $} </span>
</p>
</div>
</div>
</div>
</div>
Here is the accompanying CSS:
.vdivide:not(:last-child) {
border-right: 1px solid rgba(196, 187, 159, 0.63);
}
.carousel {
height: 300px;
}
Currently, I have 4 columns with a vertical divider between them. I would like these columns to stack nicely when viewed on a mobile screen. How can I achieve this using Bootstrap?