Small screen design goes to two rows

I am new to responsive design and I am trying to use bootstrap.

My problem is that I cannot get a portion of the html to display on a single row when on small screens.

I have the following HTML:

	<!DOCTYPE HTML>
<html>
<head lang="en">
	<title>Test</title>
	<meta content="IE=11.0000" http-equiv="X-UA-Compatible">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-width=1.0">
	<link href="files/bootstrap.css" rel="stylesheet">
	<link href="files/bootstrap-responsive.css" rel="stylesheet">
	<style>
		body, html
		{
			height: 100%;
			margin: 0;
			padding: 0;
		}
		.container-fluid
		{
			display: table !important;
			height: 100% !important;
			width: 100%;
		}
		.row-fluid
		{
			display: table-row !important;
			height: 100% !important;
			width: 100%;
		}
		.fullwidth
		{
			width: 100% !important;
		}
		
		@media screen and (min-width: 750px)
		{
		
			.top-bar-items
			{
				display: table !important;
				height: 80px;
			}
		}
		
		
		.content
		{
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		
		.navbar-cell
		{
			padding-top: 18px;
		}
		
		.blue
		{
			background-color: Blue;
		}
		.red
		{
			background-color: red;
		}
		.green
		{
			background-color: green;
		}

	</style>
</head>
<body>
	<header> 
	 <div class="container-fluid">
		<div class="row-fluid">
			<div class="col-md-5 col-sm-7 text-left">
				<a href="#"><img src="images/logo.png" /></a> 
			</div> 
			<div class="col-md-2 col-sm-5 red top-bar-items">
				   <div class="content">
					  <div class="row-fluid">
						   <div class="col-md-9 green col-sm-7 col-xm-6">            
								<a href="#"><img src="images/linkedin.png" /></a>
								<a href="#"><img src="images/linkedin.png" /></a>
								<a href="#"><img src="images/linkedin.png" /></a>                            
							</div>
							<div class="col-md-3 blue col-sm-5 col-xm-6">            
								<a href="#"><img src="images/default.png" /></a> 
								<a href="#"><img src="images/default.png" /></a>                          
							</div> 
					   </div>  
				   </div>  
			</div>
			<div class="col-md-5 text-center visible-desktop">                
				<div style="padding-top:20px;">
					<a href="#"><img src="images/header.png" /></a>                
				</div>
			</div>
		</div>
		 <div class="row-fluid">
			<div class="col-md-6 blue"> 
			Something2
			</div>
			<div class="col-md-6 red">
			   Something2
			</div>
		</div>
	 </div> 
	</header>
	<script src="files/jquery.min.js"></script>
	<script src="files/bootstrap.js"></script>
</body>
</html>

The html code I am referring to is the following:

<div class="col-md-2 col-sm-5 red top-bar-items">
				   <div class="content">
					  <div class="row-fluid">
						   <div class="col-md-9 green col-sm-7 col-xm-6">            
								<a href="#"><img src="images/linkedin.png" /></a>
								<a href="#"><img src="images/linkedin.png" /></a>
								<a href="#"><img src="images/linkedin.png" /></a>                            
							</div>
							<div class="col-md-3 blue col-sm-5 col-xm-6">            
								<a href="#"><img src="images/default.png" /></a> 
								<a href="#"><img src="images/default.png" /></a>                          
							</div> 
					   </div>  
				   </div>  
			</div>

This when on medium and large screens displays in a single row but when displayed on a small screen it breaks into two rows which is the problem.

Thanks in advance.

Answer

July 29, 2014

KyleMit

As AntB pointed out, this is just a case of accidentally using <code>col-x<b>m</b>-6</code> instead of <code>col-x<b>s</b>-6</code>.

When a column size is applied for any screen screen size, all sizes below it are automatically given a width of 12 columns unless otherwise specified. In this case the class col-xm-6 doesn't hit any rules so it doesn't tell bootstrap anything. When there are more than 12 columns worth of elements in a given row, they just wrap over into the next row, so your two small 12-column width divs just wrapped into two rows.

Change it to this:

<pre><code><div class="content"> <div class="row-fluid"> <div class="col-md-9 green col-sm-7 <b>col-xs-6</b>">  </div> <div class="col-md-3 blue col-sm-5 <b>col-xs-6</b>">  </div> </div> </div> </pre></code>

Answer

Demo in fiddle