This is my first time working with bootstrap I have some conceptual questions about how to manipulate the grid so it behaves on various sized screens.
I have developed this reproducible example to help describe my problem:
Html:
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="static/lib/bootstrap_3.0.0/css/bootstrap.min.css" />
<title>Untitled Document</title>
</head>
<body>
<div class="container-fluid">
<div id="page-content" class="application-body-home">
<h2 id="homepage-title">Campsites</h2>
<div id="content" class="row">
<input type="hidden" id="geojson_sites" name="geojson_sites_url" value="/sandbar/surveys/sites_geo_json/" readonly>
<div id="sandbar-intro" class="col-md-4 item">
<div class="sectionWideTitle">Introduction</div>
<div id='intro-text' class="well full">
</div> <!-- end of intro-text section-->
</div> <!-- end of sandbar intro section-->
<div id="sandbar-monitoring" class="col-md-4 item">
<div class="sectionWideTitle">Campsite Monitoring</div>
<div id="sites-map-div" class="well full">
<div id="monitoring-text">
</div>
</div> <!-- end of sites-map-div section-->
</div> <!-- end of sandbar monitoring section-->
<div id="sandbar_data" class="col-md-4 item">
<div class="sectionWideTitle">Campsite Locations and Historical Photos</div>
<div id="sandbar_data_links" class="well full">
</div> <!--end of sandbar data links section-->
</div> <!-- End of sandbar data section-->
<div class="col-md-4 item">
<div class="sectionWideTitle">For Additional Information</div>
<div class="well half">
<span>For additional information, please contact</span>
</div> <!-- end of well half div-->
<div class="sectionWideTitle">Terms of Use</div>
<div class="well half">
</div> <!--End of well half div-->
</div> <!-- End of col-md-4 item additional info section-->
<div class="col-md-4 item">
<div class="sectionWideTitle">References</div>
<div class="well full">
<div class="media">
<div class="media-body">
</div> <!--end of calss media body tag-->
</div>
</div>
</div> <!-- End of References Section-->
<div class="col-md-4 item">
<div class="sectionWideTitle">Cooperating Agencies and Academic Institutions</div>
<div class="well half">
<div class="media">
</div>
<div class="media">
</div>
</div>
</div> <!-- End of cooperating agencies section-->
</div> <!-- end of id content class row section -->
</div> <!-- end of page content tag -->
</div> <!--end of contaner fluid section-->
</body>
</html>
the ` tag is referring to the bootstrap.min.css file attached to this post.
I want at most 3 columns on the largest screen and i would like the boxes to extend to the end of the container (get wider). Currently it will stretch until the boxes are all in the same row. After 3 columns are reached i would like to have each box stretch so it will cover the entire width of the container.
Is there a way to control how many columns are?
Is there a way to control the order the boxes collapse on each other (i.e. going from 3 columns to two or going from 2 columns to one)?
Using Bootstrap default classes for media query behavior is what you are looking for :