tengo este codigo con bootstrap, en la que el div que contiene la imagen (zapatos.jpg) deberia en pantallas pequeñas ocupar un largo de 2, y en grandes un largo de 1. Pero me aparece como veis en la foto esta: https://postimg.cc/Q99tz33r , que es en una pantalla pequeña, y aparece como si ocupara toda la fila osea 12. Como se ve en la foto, aparece la imagen y coloreado en color secondary toda la columna que ocupa toda la fila.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="jsBootstrap/jquery-3.4.1.min.js"></script>
<script src="jsBootstrap/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class='row align-items-center'>
<div class='col-sm-2 col-lg-1 bg-secondary' >
<img class='d-block' src='zapatos.jpg' style='width:75px;height:93.75px;'>
</div>
<div class='col-sm-10 col-lg-11'>
<div class='container'>
<div class='row'>
<div class='col-sm-12 col-lg-8 bg-danger'>
<div>Nombre</div>
</div>
<div class='col-sm-12 col-lg-4 d-sm-block d-lg-flex flex-lg-row-reverse'>
<div class='d-lg-inline-flex d-sm-flex'>precio</div>
<div class='d-lg-inline-flex d-sm-flex'>unidades</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
sm
utilizaxs
ó en todo caso evita los break points y solo pon:col-2
ycol-10