Где ошибка в сетке bootstrap 4?

Question

[Том]

Добрый вечер! возник следующий вопрос:
есть у меня footer,который состоит из 2 частей. каждая часть содержит по 3 блока,которые отображаются в ряд. То есть, если пользователь просматривает сайт с ipad-а и выше(>768px),то каждая часть отображается по три блока,если меньше то по одному.
Собственно вот пытался сделать так(Bootstrap 4):

<footer class="container">
		<div class="row">
			<div class="col-md-4 col-sm-12">
				text
			</div>
			<div class="col-md-4 col-sm-12">
				text
			</div>
			<div class="col-md-4 col-sm-12">
				text
			</div>
		</div>
		<div class="row ">
			<div class="col-md-4 col-sm-12 ">text</div>
			<div class="col-md-4 col-sm-12 ">
				<ul class="list-group list-group-horizontal ">
					<li class="list-group-item "><a href="" class="white"><i class="fa fa-facebook"
								aria-hidden="true"></i></a></li>
					<li class="list-group-item "><a href="" class="white"><i class="fa fa-vk" aria-hidden="true"></i>
						</a></li>
					<li class="list-group-item "><a href="" class="white"><i class="fa fa-instagram"
								aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="col-md-4 col-sm-12 ">text</div>
		</div>
	</footer>

Однако при просмотре на экране ниже 768px,он все равно отображает по 3 блока в ряд.Подскажите пожалуйста в чем ошибка

Answer 1

[Антон Литвиненко]

закинул в песочницу, все работает. смотрите в инспекторе что происходит

Answer 2

[Том]

Может кому будет полезно
Да,ошибка в следствии моей тупости:
в head забыл закинуть

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

сам footer выглядит таким образом и все работает:

<footer class="footer-bg">
<div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-12">
        text
      </div>
      <div class="col-md-4 col-sm-12">
        text
      </div>
      <div class="col-md-4 col-sm-12">
        text
      </div>
    </div>
 </div>
<div class="container">
    <div class="row ">
      <div class="col-md-4 col-sm-12 ">text</div>
      <div class="col-md-4 col-sm-12 ">
        <ul class="list-group list-group-horizontal ">
          <li class="list-group-item "><a href="" class="white"><i class="fa fa-facebook"
                aria-hidden="true"></i></a></li>
          <li class="list-group-item "><a href="" class="white"><i class="fa fa-vk" aria-hidden="true"></i>
            </a></li>
          <li class="list-group-item "><a href="" class="white"><i class="fa fa-instagram"
                aria-hidden="true"></i></a></li>
        </ul>
      </div>
      <div class="col-md-4 col-sm-12 ">text</div>
    </div>
</div>
  </footer>