The layout for the body of the page is the first place where we will use some different grid classes. When the project is viewed on the desktop, there will be a main feed on the left and a sidebar on the right. If we switch to viewing this on a mobile device, there will be only one column with the sidebar sliding in below the main feed. Here's the grid code we'll use to set this up:
<div class="col-xs-12 col-lg-8"> … </div> <div class="col-xs-12 col-lg-3 col-lg-offset-1"> … </div>
The first column uses the
col-lg-8 class for the desktop, which will set the feed to roughly three-fourth of the width of the layout. However, for mobile devices, I'm using the
col-xs-12 class because I want it to span the width of the layout. ...