title: Stack row 2x2 on Bootstrap using rows in same height... how?
body: <p>My issue started on my need to have a nice row with same height in any device using Bootstrap 3. So far ok... I googled it and found this code here</p>
  
  <pre><code>/* Row with equal height columns */
  .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  }
  </code></pre>
  
  <p>So far so good. But, in mobile device doesn't look so good... so, I searched a little bit more and found my answers <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">here</a>. Well, my code at the end is this <a href="http://codepen.io/tofanelli/full/QbyWMP" rel="nofollow noreferrer">CodePen</a>. Works? Yeah.... kind of.... What I want is, when possible, the row stacks in a 2x2 column, like this image </p>
  
  <p><img src="https://i.stack.imgur.com/ohDMu.png" alt=""></p>
  
  <p>Like this one</p>
  
  <p>in small tablet portrait mode (600x800) and not like this one i am getting </p>
  
  <p><img src="https://i.stack.imgur.com/vMvBg.png" alt=""></p>
  
  <p>The first image has less words than the second one just to show how I want them. </p>
  
  <p>Well, and there is another issue too... If you look into the code on Codepen, this CSS ONLY works, for any reason, if I leave second } closing the "container" on styles.... </p>
  
  <p>Yeah.... so many issues in only one thread.... so, to summarize:</p>
  
  <ol>
  <li>why do I need to leave that second <code>}</code> to make this works?</li>
  <li>If I don't need it, how to make this works then?</li>
  <li>How to make the columns stacks on 2x2 when small tablet portrait mode?</li>
  </ol>
  
  <p>To help me to see the responsive resolutions, I use a Chrome add-on.</p>