title: Running a Javascript loop inside a bootstrap "row"
body: <p>I am trying to pull the 12 latest tumblr posts to a website and maintain the bootstrap structure, but I can't figure out how to make the loop pull different photos for each of the span4's. Right now it is pulling 12 rows, each photo is repeated 3 times, I would like it to be 4 rows of 3 photos where each is different. Can anyone help out here?</p>
  
  <pre><code>function formatPhotoHTML(post) {
      var html = '&lt;div class="container"&gt;';
      html += '&lt;div class="row"&gt;';
      html += '&lt;div class="span4"&gt;';
  
      for (var i = 0; i &lt; post.photos.length; i++) {
          var photo = post.photos[i] ;
          html += '&lt;div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"&gt;&lt;/div&gt;';
          html += '&lt;/div&gt;';
          html += '&lt;div class="span4"&gt;';
          var photo = post.photos[i];
          html += '&lt;div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"&gt;&lt;/div&gt;';
          html += '&lt;/div&gt;';
          html += '&lt;div class="span4"&gt;';
          var photo = post.photos[i];
          html += '&lt;div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"&gt;&lt;/div&gt;';
          html += '&lt;/div&gt;';
      }
  
      html += '&lt;/div&gt;';
      html += '&lt;/div&gt;';
  
      return html;
  }
  
  function appendPostToPage(post) {
    $('.postspot').append(post);
  }
  
  function getPosts() {
      $.getJSON('(TUMBLR_API_KEY)',
      function(r) {
          var posts = r.response.posts;
  
          for (var i = 0; i &lt; 12; i++) {
              var html = "";
  
              if (posts[i].type === "text") {
                  html = formatTextHTML(posts[i]);
              } else if (posts[i].type === "photo") {
                  html = formatPhotoHTML(posts[i]);
              }
  
          appendPostToPage(html);
      }
  });
  
  }
  
  
  $(document).ready(function() {
    getPosts();
  });
  </code></pre>