I have a page with 2 columns nested in another column. I am trying to hide one column at the sm breakpoint and have the other column go to 12. But when I resize the screen, the one column stacks instead of hiding. What am I doing wrong?

<div class="container-fluid h-100">
    	<div class="row h-100">
    		<div class="col-md-1"></div>
    		<div id class="col-sm-12 col-md-10 h-100">
    			<div class="row">
    				<div id="header" class="col-md-12">
    				    <img class="img-fluid" src="images/if/mastheadLogo.jpg">
    				</div>
    			</div>
    			<div class="row">
    				<div id="menu" class="col-md-12">
    				    <? include("menu.htm");?>
    				</div>
    			</div>
    			<div class="row h-100">
    				<div id="sidebar" class="col-md-2">
    				</div>
    				<div id="content" class="col-sm-12 col-md-10">
    				</div>
    			</div>
    			<div class="row">
    				<div class="col-md-12">
    				</div>
    			</div>
    		</div>
    		<div class="col-md-1"></div>
    	</div>
    </div>