Bootstrap - Columns not align on same row

Question

I have a Bootstrap row with 2 columns. But when viewing it in the browser's phone emulation, it displays as two rows. In regular dekstop modus, it does render as expected.

Any idea what is causing this?

<header role="heading" class="container-fluid">
            <div class="row">
                <div class="col-sm-2">                  
                    def
                </div>
                <div class="col-sm-9 ">
                    abc                    
                </div>
            </div>
        </header>

Answer 1

As Atul Kumar said, "sm" is incorrect and it should be "xs"