bootstrap achieve responsive Pictures

Responsive picture of two common forms of project applications:
are: screen size changes, the picture layout changes. In order to meet the pc and mobile end devices conversion, using two sets of image resources.
One: the screen size changes, the layout of the picture will change

<div class="container-fluid">
       <div class="row">
           <div class="col-md-3 col-sm-6 col-xs-12">
               <img src="img/box-logo.png" alt="" class="img-responsive center-block">
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12">
            <img src="img/google-logo.png" alt="" class="img-responsive center-block">
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <img src="img/intuit-logo.png" alt="" class="img-responsive center-block">
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <img src="img/square-logo.png" alt="" class="img-responsive center-block">
            </div>
        </div>
   </div>

Effect:
1. desktop picture is greater than (> 996px)

2. plates (> 768px <996px)

3. Mobile (<768px)

II: In order to meet the mobile terminal device and pc-conversion, use of two image resources

<div class="container">
       <img src="1.jpg" alt="" class="visible-xs img-responsive">
       <img src="2.jpg" alt="" class="hidden-xs img-responsive">
   </div>

Two sets of image resources, and prevent page Caton and save traffic.