2-colum sidebar with Bootstrap grid

Requirements: Bootstrap 3, sidebar responsive with max-width of 320px

by jorgeluis

HTML

<div class="container">
    <p>
    A .container div wraps everything to limit page width.
    </p>
    <div class="content">
      <h1>
      Page Content
      </h1>
      <p>
      This should take up 75% of the page to allow a 25% sidebar. The sidebar should be no larger than 320px wide.
      </p>
      <p>
      Bootstrap 3 grid must be used (this is a client requirement). This (.content) section will have nested grid columns.
      </p>
    </div>

    <div class="sidebar">
        sidebar, or 'aside' if you prefer
        <h2>
        Some subheading
        </h2>
        <p>
        Column-organized content
        </p>
    </div>

</div>

CSS

@media screen and (min-width: 768px) {

    .content {
        float: left;
        width: 75%;
    }
    .sidebar {
        float: right;
        width: 25%;
    }

}