title: CSS3 Flex and Bootstrap
body: <p>Using this example, <a href="http://www.bootply.com/126437/" rel="nofollow">http://www.bootply.com/126437/</a>, I am trying to make my Bootstrap layout columns equal height, as well as still be fully responsive.</p>
  
  <p>I am trying to get my head around how the CSS is working in the example but still haven't cracked it. With my own SASS, the layout looks fine on a large screen, but until I add "auto" to my flex, the columns aren't responsive on a small screen.</p>
  
  <p>Any help would be appreciate to get this working on all size screens!</p>
  
  <p>HAML/Bootstrap:</p>
  
  <pre><code>%section.row.row-flex.row-flex-wrap
    .col-xs-12.col-sm-12.col-md-8.col-lg-8.column-flex
      .flex-col
        = field('block_2')
    .col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
      .row 
        .col-xs-12.col-sm-6.col-md-12.col-lg-12
          .events-image-block
            = field('block_3')
        .col-xs-12.col-sm-6.col-md-12.col-lg-12
          = field('block_4')
  %section.row.row-flex.row-flex-wrap
    .col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
      .flex-col
        = field('block_5')
    .col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
      .flex-col
        = field('block_6')
    .col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
      .flex-col
        = field('block_7')
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>section.row-flex {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  
    &amp;.row-flex-wrap {
      -webkit-flex-flow: row wrap;
      align-content: flex-start;
      webkit-flex: 0;
      -ms-flex: 0;
      flex: 0;
    }
  
    &amp; &gt; .column-flex {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -moz-box;
      display: flex;
      margin: -.2px;
  
      &amp;.one-column {
        webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
  
    .flex-col,
    .flex-col &gt; div {
      flex-flow: column nowrap;
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  
    .flex-grow {
      display: flex;
      -webkit-flex: 2;
      -ms-flex: 2;
      flex: 2;
    }
  }
  </code></pre>