Append Div Class with Ajax Loop

I have an Ajax script that reads an XML file and appends each node inside a div with an ID "links." The script is working OK, but I'd like to display each result within a class "col-md-3".

Here's the loop from the Ajax script:

$(xml).find('ref').each(function () {
  // set thumbs and big image paths
  var thumbUrl = 'img/thumbs/';
  var bigUrl = 'img/';

  $('<a />')
  .append($('<img>').prop('src', thumbUrl + img).attr('alt', alt))
  .prop('href', bigUrl + img)
  .prop('title', title)
  .prop('alt', alt)
  .attr('data-gallery', '')
  .appendTo($('#links'));
}); 

The result looks like this:

<div id="links">
  <a href="img/apple.jpg" title="Apple" data-gallery="">
  <img src="img/thumbs/apple.jpg" alt="Apple"></a>

  <a href="img/orange.jpg" title="Orange" data-gallery="">
  <img src="img/thumbs/orange.jpg" alt="Orange"></a>
</div>

I'd like to display each image link inside a column class "col-md-3" like this:

<div id="links">
  <div class="col-md-3">
    <a href="img/apple.jpg" title="Apple" data-gallery="">
    <img src="img/thumbs/apple.jpg" alt="Apple"></a>
  </div>

  <div class="col-md-3">
    <a href="img/orange.jpg" title="Orange" data-gallery="">
    <img src="img/thumbs/orange.jpg" alt="Orange"></a>
  </div>
</div>