Two Feeds combined into one

So, I have a Materialize CSS based website. Materialize CSS is a CSS library, available here, link.

Now, I managed to display my Blog feed into two columns, going down the first row, then the second row like this.

------------------------Newest     | 4th Newest2nd Newest | 5th Newest3rd Newest | 6th Newest------------------------

This is the code used in the one above.

<div class="row"><div id="firstColumnBlog" class="col s6"></div><div id="secondColumnBlog" class="col s6"></div></div><script>$(document).ready(function() {    $.ajax({        type: "GET",        url: "http://www.foxinflame.tk/blog/feed/",        dataType: "xml",        success: function (xml) {            $(xml).find("item").each(function (eachCounter) {                var title = $(this).find("title").text();                var description = $(this).find("description").text();                var comments = +($(this).find("slash:comments").text());                var pubDate = $(this).find("pubDate").text();                var link = $(this).find("link").text();                if(eachCounter < 3){                  $("#firstColumnBlog").append("<div class='postCollection'><div class='z-depth-1 blogpost' style='min-height: 300px'><br><h5><a style='color:black' href='"+link+"'>"+title+"</a></h5><br><p>"+description+"<br><i>"+comments+" Comments. Published at "+pubDate+"</i></p></div></div>");                } else if(eachCounter < 6) {                  $("#secondColumnBlog").append("<div class='postCollection'><div class='z-depth-1 blogpost' style='min-height: 300px'><br><h5><a style='color:black' href='"+link+"'>"+title+"</a></h5><p>"+description+"<br><i>"+comments+" Comments. Published at "+pubDate+"</i></p></div></div>");                }            });        }    });  })</script>

Now, I want to add in another feed, to display with the current one. Let's say, a YouTube video feed. It needs to display in the same two columns, in the correct time order, with both feeds mixed.

How would I possibly do this?