I'm trying to create this layout on my custom WP theme with Boostrap 3.

example.jpg

The layout works to some degree, but when the screen is adjusted to mobile width, the footer is overlayed and the text boxes stretch down the screen.

Although messy, I know this could be combatted by applying different heights to the text box container, but is there any way to achieve this dynamically?

HTML:

HTML Code:
    <header></header>
    
    <div id="wrapper">
    	 
    	<div class="col-md-12">
    	
    		<!-- Image Start -->
    
    		<div class="row">
				<div id="slider">
    			
    			SLIDER GOES HERE

    			</div>
    		</div>
    		
    		<!-- Image End -->
    	
    		<!-- Columns Start -->
    
		<div id="front-cols">
		
    		<div class="row">
    		
    			<div class="col-md-1"></div>
    		
    			<div class="col-md-10">
    			
    			<!-- First Column Start -->
    		
    				<div class="col-md-4">
    	
    					<h3 class="highlight">Welcome</h3>
    					<div class="title-cut"></div>
    
    						<div class="home-main">
    		
    						</div>
    				</div>
    				
    				<!-- First Column End -->
    				
    				<!-- Second Column Start -->
    				
    				<div class="col-md-4">
    
    					<h3 class="highlight">What's On?</h3>		
    					<div class="title-cut"></div>
    				
    						<div class="room">
    	
    						</div>
    				</div>
    				
    				<!-- Second Column End -->
    				
    				<!-- Third Column Start -->
    		
    				<div class="col-md-4">
    			
    					<h3 class="highlight">Our Rooms</h3>			
    					<div class="title-cut"></div>
    			
    						<div class="room">
    
    	
    						</div>	
    				</div>
    				
    				<!-- Third Column End -->
    	
    			</div>
    
    			<div class="col-md-1"></div>
    
    		</div>
		</div>
    		
    		<!-- Columns End -->
    		
    	</div>
    </div>
    
    <div id="push"></div>
    
    <footer></footer>
My CSS (not inc Bootstrap defaults) 'Push' 'footer' and the negative margin that keep the footer at the bottom change according to the screen width:

Code:
   * {
    	margin: 0;
    }
    
    html, body {
    	height: 100%;
    }
    
    #wrapper {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -258px !important;
    }
    
    #push {
    	height: 258px;
    }
    
    footer {
    	background:url('images/red.png') repeat;
    	height:258px;
    }
    
    #slider {
    	position: relative;
    	height:100%;
    }
    
    #front-cols {
    	z-index:9999;
    	top:70%;
    	position:absolute;
    	width: 100%;
    	height: 100%;"
    }