SO multiplie spans per row

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="span4">content 1</div>
        <div class="span4">content 2</div>
        <div class="span4">content 3</div>
        <div class="span4">content s4</div>
        <div class="span4">content 5</div>
        <div class="span4">content 6</div>
        <div class="span4">content 7</div>
    </div><!-- end row -->
  
  <div class="row">
        <div class="span4 short">content 1</div>
        <div class="span4 tall">content 2</div>
        <div class="span4 short">content 3</div>
        <div class="span4 short">content 4</div>
        <div class="span4 short">content 5</div>
        <div class="span4 short">content 6</div>
        <div class="span4 short">content 7</div>
    </div><!-- end row -->
  
  <div class="row multiple">
        <div class="span4 short">content 1</div>
        <div class="span4 tall">content 2</div>
        <div class="span4 short">content 3</div>
        <div class="span4 short">content 4</div>
        <div class="span4 short">content 5</div>
        <div class="span4 short">content 6</div>
        <div class="span4 short">content 7</div>
    </div><!-- end row -->

</div>

CSS

.span4{
  background-color:grey;
  margin-bottom:2px;
}
.row{
  background-color:pink;
}

.span4.short{
  background-color:#ffa;
  margin-bottom:2px;
  height:30px;
}

.span4.tall{
  background-color:#ffa;
  margin-bottom:2px;
  height:300px;
}

.row.multiple .span4{
  background-color:#fdf
}
.row.multiple .span4:nth-child(3n+4) {  
   clearsleft;
}