Assgined different classes of bootstrap to an element but it failed to be responsive when the resolu-CodePudding

<!DOCTYPE html>
<html>
    
<head>
    <title>Bootstrap Layout</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
    <!-- <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> -->
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-3" style="background-color: aqua;">1</div>
            <div class="col-sm-6 col-md-3" style="background-color: antiquewhite;">2</div>
            <div class="col-sm-6 col-md-3" style="background-color: burlywood;">3</div>
            <div class="col-sm-6 col-md-3" style="background-color: forestgreen;">4</div>
        </div>  
    </div>
</body>

</html>

I used toggle device toolbar in devtool to switch to smaller devices like Moto G4 but the page seemed to be the same with what I saw under my computer's original resolution. I expected to see two colomuns in a row when the screen is small, but it turned out to be four rows constantly. Can someone telling me why?

CodePudding user response：

Adding a viewport (e.g. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>) should help:

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Layout</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <!-- <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-3" style="background-color: aqua;">1</div>
      <div class="col-sm-6 col-md-3" style="background-color: antiquewhite;">2</div>
      <div class="col-sm-6 col-md-3" style="background-color: burlywood;">3</div>
      <div class="col-sm-6 col-md-3" style="background-color: forestgreen;">4</div>
    </div>
  </div>
</body>

</html>