<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap</h1>
<p>Bootstrap HTML, CSS, and JavaScript framework</p>
<!-- xs for phones
md for desktops
-->
<div class="row">
<div class="col-xs-9 col-md-6" style="background-color:green;">col-xs-9 col-md-6</div>
<div class="col-xs-4 col-md-5" style="background-color:red;">col-xs-4 col-md-5</div>
</div>
<div class="row">
<div class="col-xs-5 col-md-7" style="background-color:lightblue;">col-xs-5 col-md-7</div>
<div class="col-xs-5 col-md-2" style="background-color:brown;">col-xs-5 col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6" style="background-color:gray;">.col-xs-6</div>
<div class="col-xs-6" style="background-color:lightcoral;">.col-xs-6</div>
</div>
</div>
</body>
</html>
<!--
run:
Resize the browser to see how the columns act
-->
