title: Bootstrap- why won't my div jump to the next row on mobile?
body: <p>I have 4 rows of content with 2 columns in each row, and this looks great on laptops. I tried to use bootstrap to line up the columns differently on mobile, so that each row only has one column instead of two. I know if the row has 2 divs in in and each div takes 12 sections, in theory the 2nd div will just to the row underneath but it's not working. For some reason, this isn't both columns are aligned next to each other and squished together instead of one being under the other. How do I get this to look better on mobile? Here is what one row looks like: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-12 col-sm-6"&gt;
      &lt;a class="link-image" target="_blank" href=link&gt;
        &lt;div class="picture" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url(some image);"&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-sm-6"&gt;
      &lt;div class="description"&gt;
        &lt;h4&gt; &lt;a href=link target="blank"&gt;link&lt;/a&gt; &lt;/h4&gt;
        &lt;p&gt;Some text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>