title: Why do my Bootstrap columns wrap in an uneven manner?
body: <p>I had a problem with a row in bootstrap that wraps totally wrong.</p>
  <p>On desktop screens, there are 4 boxes in a row shown perfectly.
  On smaller screens, it changes to 2 boxes in a row. Perfect. But if the size of the left box in row 1 is bigger because of more text in it, than the third box disappears in row 2 and will display in row 3.</p>
  <p>If box 2 has a bigger size than box 1, it wraps around totally ok.</p>
  <p>I add you two images of the problem and also a light version of the code</p>
  <p>This is the picture of the failure</p>
  <p><img src="https://i.stack.imgur.com/XlB3j.jpg" alt="failure_image" /></p>
  <p>This is the picture of the right execution i wanted to have also on the left boxes</p>
  <p><img src="https://i.stack.imgur.com/UPmBF.jpg" alt="right_image" /></p>
  <p>And this is the code</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;features-grids&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
      &lt;div class=&quot;feature&quot;&gt;
          &lt;div class=&quot;feature1&quot;&gt;
              &lt;a href=&quot;sites/story.php&quot; style=&quot;text-decoration:none;&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-heart&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;h4&gt;Unsere Story&lt;/h4&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;feature2&quot;&gt;
              &lt;p&gt;Hier findet ihr einen Rückblick auf unser gemeinsames Leben&lt;/p&gt;                                  &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
      &lt;div class=&quot;feature&quot;&gt;
          &lt;div class=&quot;feature1&quot;&gt;
              &lt;a href=&quot;sites/galerie_hochzeit.php&quot; style=&quot;text-decoration:none;&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-camera&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;h4&gt;Galerie&lt;/h4&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;feature2&quot;&gt;
              &lt;p&gt;Hier findet ihr Fotos - Von vor und nach der Hochzeit&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
      &lt;div class=&quot;feature&quot;&gt;
          &lt;div class=&quot;feature1&quot;&gt;
              &lt;a href=&quot;sites/hochzeit.php&quot; style=&quot;text-decoration:none;&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-calendar&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;h4&gt;Wichtigste Infos&lt;/h4&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;feature2&quot;&gt;
              &lt;p&gt;Hier findet ihr alle wichtigen Infos zu unserem großen Tag&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
      &lt;div class=&quot;feature&quot;&gt;
          &lt;div class=&quot;feature1&quot;&gt;
              &lt;a href=&quot;sites/wunschliste.php&quot; style=&quot;text-decoration:none;&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-gift&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;h4&gt;Wunschliste&lt;/h4&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;feature2&quot;&gt;
              &lt;p&gt;Hier findet ihr die nützlichsten Geschenkideen für uns&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>I hope you can help me.</p>