float-left-float-right.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Side by side divs - Spectre.css example</title>
	<meta name="description" 
	content="Spectre.css float-left and float-right divs">
	<meta name="keywords" content="spectre.css tutorial">
	<link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css" />
	<style>
		h1, h2 { color: black; font-weight: 700; }
		h1 { font-size: 4em; line-height: .9em; 
			margin-top: 1em; }		
		h2 { font-size: 3em; }
	</style>
</head>
<body>
	<div class="container">
		<div class="columns" >
			<div class="column col-6 col-sm-6 float-right">
				<img 
					src="images/lighthouse-640x480.jpg" 
					alt="Lighthouse"
					class="img-responsive">
			</div><!-- .column col-sm-1 -->  
			<div class="column col-6 col-sm-12 float-left">
				<h1>When you need someone to light the way,</h1>
				<h2>We'll be there.</h2>
			</div> 			
		</div><!-- .columns -->
	</div><!-- .container -->
</body>