Responsive photo gallery using Flickr API

This began as just a simple sidebar widget and evolved into what you see here.

I'm pretty happy with the results but the photos take a long time to render and sort out on the page. Is this mostly related to the responsive grid styling, or is it related to the interaction with the Flickr API? If it's related to the styling, is there anyway it could be improved so that they render faster?

Here's the link to the github repo, if that helps.

Home page file: (views/static_pages/home.html.erb)

<nav class="navbar navbar-default" role="navigation">
  <div class="collapse navbar-collapse">
    <div class="col-sm-4 col-md-4">
      <form class="navbar-form" role="search">
        <h4>Enter your Flickr ID <small><%= link_to "Find your ID", 'http://idgettr.com/', target: :_blank %></small></h4>
          <div class="input-group">
            <%= form_tag root_path, method: :get do  %>
              <%= text_field_tag :flickr_id, nil, placeholder:'Ex: 30179751@N06', class:'form-control' %>
            <div class="input-group-btn">
              <%= submit_tag "Show Photos", name: nil, class:'btn btn-default' %>
            </div>
            <% end %>
          </div>
      </form>
    </div>
  </div>
</nav>

<% unless @flickr_id.nil? %>
    <%= render_flickr_sidebar_widget(@flickr_id) %>
<% end %>

Flickr Helper file: (app/helpers/flickr_helper.rb)

module FlickrHelper
  def user_photos(user_id, photo_count)
    flickr.photos.search(user_id: user_id, per_page: photo_count)
  end

  def render_flickr_sidebar_widget(user_id, photo_count = 100)
    begin 
      photos = user_photos(user_id, photo_count)
      render :partial => '/flickr/sidebar_widget', :locals => {:photos => photos}
    rescue Exception
      render :partial => '/flickr/unavailable'
    end
  end
end

Sidebar widget partial: (views/flickr/_sidebar_widget.html.erb)

<section id="photos">
  <% photos.each do |p| %>
    <%= link_to image_tag(FlickRaw.url_b(p), title: p.title), FlickRaw.url_short(p), target: :_blank %>
  <% end %>
</section>

Sass file: (app/assets/stylesheets/custom.css.scss)

@import "bootstrap";

#photos {
  line-height: 0;

  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}