'Assgined different classes of bootstrap to an element but it failed to be responsive when the resolution ratio changed

<!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 columns in a row when the screen is small, but it turned out to be four rows constantly. Can someone telling me why?

htmlcsstwitter-bootstrap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions