title: Bootstrap 4 row layout is not responsive
body: <p>I'm creating an html template for a news article layout using Bootstrap 4, on the MEAN stack, but that shouldn't matter...</p>
  
  <p>The requirements are for this general layout, one 'featured' article in its own column, and 8 other articles on two rows in another column. When viewed on smaller screens or mobile, the other articles should tuck under the first and under each other as necessary:</p>
  
  <p>Desktop:</p>
  
  <pre><code>-----------------------------------------------------------------
                   | Article 1 | Article 2 | Article 3 | Article 4 |
  Article 0        |                                               |
                   | Article 5 | Article 6 | Article 7 | Article 8 |
  -----------------------------------------------------------------
  </code></pre>
  
  <p>Mobile:</p>
  
  <pre><code>-----------------
  Article 0
  -----------------
  Article 1
  -----------------
  Article 2
  -----------------
  .
  .
  </code></pre>
  
  <p>This is the what I'm using to achieve the layout:</p>
  
  <pre><code>  &lt;div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-4"&gt;
          &lt;div&gt;
            Article 0
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-8"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-3"&gt;
              Article 1
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              Article 2
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              Article 3
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              Article 4
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              Article 5
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              Article 6
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              Article 7
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              Article 8
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This works great on desktop, but on mobile every element is jammed together on a single row. I would like them all to fall into a single column when the screen size is small. I suspect the outer <code>&lt;div class="row"</code> is the reason for the mobile behavior, but on desktop I can't get the Article 0 to stay on the same row with the others without using that. I know I'm probably missing something fundamental about Bootstrap, so there must be a better way of doing this.</p>
  
  <p>How can I make this layout, which works great on the desktop, render properly on mobile? Thanks.</p>