Bootstrap:brak reakcji na hidden-lg-down

Cześć,
tworzę swój pierwszy projekt w Bootstrapie. Chcę użyć klasy hidden-lg-down aby ukryć kolumnę podczas wyświetlania na telefonach. Jednak klasa ta kompletnie nie działa, podczas przełączenia strony w tryb mobilny kolumna nadal jest widoczna. Proszę o pomoc. Oto kod:

<section id="AUs">       
       <div class="container" >
           <div class="row align-items-center" >
               <div class="col-sm-6" hidden-lg-down><img src="img/AboutUs.png"/></div>
               <div class="col-sm-6" id="a1"><h1>About Us</h1>
               <p>Coś tam....</p>
               </div>
           </div>
       </div>
   </section>

Błąd w składni:

<div class="col-sm-6 hidden-lg-down"><img src="img/AboutUs.png"/></div>

Przesunąłeś klasę .hidden-lg-down poza ""

Poprawiłem, nadal nie działa.

zoba to:
https://codepen.io/_yatko/pen/ZJXQxy