various bootstrap divs

index.html.erb

  <div class="row">
    <div class="col-md-6">
      <h1>Refcodes</h1>
      Referral discounts for great tech<br>
      products and services
    </div>
    <div class="col-sm-6 message">
      Share referral discounts for your favorite web products and services, and redeem discounts for other products and services you want to try out. Oh, and if you see that there is already a post for the same referral deal, don't duplicate it. Otherwise, we might remove it.
      <br>
      <span class="pull-right">Thanks!</span>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-4">

    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 hidden-xs">
      <div class="ref-form-parent">
        <div class="ref-form hidden-xs" data-spy="affix" data-offset-top="100">
          <%= link_to "Latest Referrals", root_path, class: 'btn btn-default latest', style: 'width:48%;' %>
          <%= link_to "Most Popular", root_path(most_popular: true), class: 'btn btn-info most-popular', style: 'width:48%;' %>
          <br>
          <br>
          <%= form_tag root_path, method: :get, class: 'form-inline', role: 'search' do %>
            <div class="form-group" style="width: 78.5%;">
              <%= text_field_tag :query, params[:query], class: 'form-control' %>
            </div>
            <%= submit_tag "Search", class: 'btn btn-default', name: nil %>
          <% end %>
          <br>
          <div class="js-ref-form">
            <%= render partial: 'form', locals: { referral: @referral, company: @company } %>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-8 visible-xs">
        <%= link_to "Latest Referrals", root_path, class: 'btn btn-default latest', style: 'width:45%;' %>
        <%= link_to "Most Popular", root_path(most_popular: true), class: 'btn btn-info most-popular', style: 'width:45%;' %>
        <br>
        <br>
        <%= form_tag root_path, method: :get, class: 'form-inline', role: 'search' do %>
          <div class="form-group search-small">
            <%= text_field_tag :query, params[:query], class: 'form-control' %>
          </div>
          <%= submit_tag "Search", class: 'btn btn-default', name: nil %>
        <% end %>
        <br>
    </div>

    <!-- for large screens -->
    
    <div class="col-sm-8 visible-lg">
      <div class="referrals-list js-referrals">
        <% if @referrals.any? %>
          <%= render partial: 'referral', collection: @referrals %>
          <%= link_to 'Load More Referrals', root_path(page: @referrals.next_page), :class => 'load-more-referrals', :remote => true if @referrals.next_page %>
      </div>
        <% else %>
          No referrals posted yet!
        <% end %>
    </div>
    
    <!-- for medium screens -->

    <div class="col-sm-6 col-sm-offset-1 visible-md">
      <div class="referrals-list js-referrals">
        <% if @referrals.any? %>
          <%= render partial: 'referral', collection: @referrals %>
          <%= link_to 'Load More Referrals', root_path(page: @referrals.next_page), :class => 'load-more-referrals', :remote => true if @referrals.next_page %>
      </div>
        <% else %>
          No referrals posted yet!
        <% end %>
    </div>

    <!-- for small screens -->

    <div class="col-sm-5 col-sm-offset-2 visible-sm">
      <div class="referrals-list js-referrals">
        <% if @referrals.any? %>
          <%= render partial: 'referral', collection: @referrals %>
          <%= link_to 'Load More Referrals', root_path(page: @referrals.next_page), :class => 'load-more-referrals', :remote => true if @referrals.next_page %>
      </div>
        <% else %>
          No referrals posted yet!
        <% end %>
    </div>

    <!-- for phone-size screens -->
    
    <div class="col-xs-12 visible-xs">
      <div class="referrals-list js-referrals">
        <% if @referrals.any? %>
          <%= render partial: 'referral', collection: @referrals %>
          <%= link_to 'Load More Referrals', root_path(page: @referrals.next_page), :class => 'load-more-referrals', :remote => true if @referrals.next_page %>
      </div>
        <% else %>
          No referrals posted yet!
        <% end %>
    </div>
  </div>