Bootstrap Column : lg, md, sm

Looking at the Apple.com, the 4 panels below the hero changes 3 times according to device's width. So without further ado, lets dive into the concept and code.

<section id="featured-apps">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 box">
1
</div><!-- col -->
<div class="col-lg-3 col-md-6 col-sm-6 box">
2
</div><!-- col -->
<div class="col-lg-3 col-md-6 col-sm-6 box">
3
</div><!-- col -->
<div class="col-lg-3 col-md-6 col-sm-6 box">
4
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- featured-apps -->