css - Bootstrap Columns Not Working When Resizing -

i'm having problem if resize browser small size, columns don't work , instead each image shown in different rows. it's shown here:

it work correctly in bigger size displays 4 images in row. know fix this?

<div class="container">   <div class="container-fluid">     <div class="row">       <div class="col-sm-3">         <a href="#"><img src="smiley.gif" alt="smiley face" height="267" width="187"></a>       </div>       <div class="col-sm-3">         <a href="#"><img src="smiley.gif" alt="smiley face" height="267" width="187"></a>       </div>       <div class="col-sm-3">         <a href="#"><img src="smiley.gif" alt="smiley face" height="267" width="187"></a>       </div>       <div class="col-sm-3">         <a href="#"><img src="smiley.gif" alt="smiley face" height="267" width="187"></a>       </div>     </div>   </div> </div> 

first off shouldn't using 2 containers. secondly:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container-fluid">      <div class="row">        <div class="col-sm-3">          <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="smiley face" height="267" width="187"></a>        </div>        <div class="col-sm-3">          <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="smiley face" height="267" width="187"></a>        </div>        <div class="col-sm-3">          <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="smiley face" height="267" width="187"></a>        </div>        <div class="col-sm-3">          <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="smiley face" height="267" width="187"></a>        </div>      </div>    </div>

this works expected because col-sm-* applied above 767px. should use col-xs-* smaller screens.