title: Prevent split cards in columns with CSS
body: <p>I'm making a timeline with two columns. The problem I've got is that one card is split over two columns like shown on image below. How could I solve this problem? Here you've my SCSS and HTML code.</p>
  
  <pre class="lang-css prettyprint-override"><code>.card-col-2 {
    @media (min-width: 980px) {
      column-count: 2;
      column-gap: 100px;
      column-fill: auto;
      column-rule-style: solid;
      column-fill: auto;
    }
  
    @media (max-width: 980px) {
      column-count: 1;
      column-gap: 100px;
      column-fill: auto;
      column-rule-style: solid;
      column-fill: auto;
    }
    padding: 20px;
  
    .card {
      background-color: #fff;
      border: 1px solid gray;
      border-radius: 5px;
      padding: 15px;
      box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
      box-sizing: content-box;
      margin: 20px 0;
      height:150px;
  
      .pointer {
        border: 1px solid gray;
        width: 30px;
        height: 30px;
        transform: rotate(45deg);
        position: relative;
        z-index: -1;
        background-color: white;
      }
  
      .pointer-left {
        left: -30px;
        top: 5px;
      }
      .pointer-right {
        left: 470px;
        top: 5px;
      }
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="card-col-2"&gt;
      &lt;div class="card"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;h2 class=""&gt;&lt;i class="fa fa-graduation-cap fa-fw"&gt;&lt;/i&gt; NMCT @ HoWest&lt;/h2&gt;
                  &lt;p&gt;Van September 2014 tot heden&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;img src="images/nmct.jpg" class="img-responsive"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;h2 class=""&gt;&lt;i class="fa fa-graduation-cap fa-fw"&gt;&lt;/i&gt; VDO Analyst programmeur @ Syntra West&lt;/h2&gt;
                  &lt;p&gt;Van September 2014 tot heden&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;img src="images/syntra.jpg" class="img-responsive"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;h2 class=""&gt;&lt;i class="fa fa-child fa-fw"&gt;&lt;/i&gt; Geboren&lt;/h2&gt;
                  &lt;p&gt;Op 7 Januarie 1994&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/G1xnd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G1xnd.png" alt="enter image description here"></a></p>