Cacher is the code snippet organizer for pro developers

##What you have:

##What you want:

###1. Open the footer.liquid file. After the social_icons {% endif %} add:

{% assign menu_links = 0 %}
{% if section.settings.footer_linklist != blank %}{% assign menu_links = menu_links | plus: 1 %}{% endif %}
{% if section.settings.footer_linklist_two != blank %}{% assign menu_links = menu_links | plus: 1 %}{% endif %}
{% if section.settings.footer_linklist_three != blank %}{% assign menu_links = menu_links | plus: 1 %}{% endif %}
{% if section.settings.footer_linklist_four != blank %}{% assign menu_links = menu_links | plus: 1 %}{% endif %}
{% if section.settings.footer_newsletter_enable %}{% assign menu_links = menu_links | plus: 1 %}{% endif %}

###2. Look for the two grid_item classes for linklists in the footer:

###And replace all with this:

<div class="grid__item{% if menu_links == 3 %} medium-up--one-third{% elsif menu_links == 2 %} medium-up--one-half{% elsif menu_links == 4 or section.settings.footer_newsletter_enable %} medium-up--one-quarter{% else %} text-center{% endif %}">
{%- assign footer_linklist = section.settings.footer_linklist -%}
  {% if linklists[footer_linklist].links.size > 0 %}
    <ul class="site-footer__linklist{% unless section.settings.footer_newsletter_enable %} site-footer__linklist--center{% endunless %}">
     {% if section.settings.footer_linklist_heading != blank %}<h3>{{ section.settings.footer_linklist_heading }}</h3>{% endif %}
     {% for link in linklists[footer_linklist].links %}
       <li class="site-footer__linklist-item">
         <a href="{{ link.url }}">{{ link.title }}</a>
       </li>
     {% endfor %}
    </ul>
  {% endif %}
</div>

<div class="grid__item{% if menu_links == 3 %} medium-up--one-third{% elsif menu_links == 2 %} medium-up--one-half{% elsif menu_links == 4 or section.settings.footer_newsletter_enable %} medium-up--one-quarter{% else %} text-center{% endif %}">
   {%- assign footer_linklist_two = section.settings.footer_linklist_two -%}
    {% if linklists[footer_linklist_two].links.size > 0 %}
     <ul class="site-footer__linklist{% unless section.settings.footer_newsletter_enable %} site-footer__linklist--center{% endunless %}">
       {% if section.settings.footer_linklist_heading_two != blank %}<h3>{{ section.settings.footer_linklist_heading_two }}</h3>{% endif %}
       {% for link in linklists[footer_linklist_two].links %}
         <li class="site-footer__linklist-item">
           <a href="{{ link.url }}">{{ link.title }}</a>
         </li>
       {% endfor %}
     </ul>
   {% endif %}
</div>

<div class="grid__item{% if menu_links == 3 %} medium-up--one-third{% elsif menu_links == 2 %} medium-up--one-half{% elsif menu_links == 4 or section.settings.footer_newsletter_enable %} medium-up--one-quarter{% else %} text-center{% endif %}">
  {%- assign footer_linklist_three = section.settings.footer_linklist_three -%}
     {% if linklists[footer_linklist_three].links.size > 0 %}
       <ul class="site-footer__linklist{% unless section.settings.footer_newsletter_enable %} site-footer__linklist--center{% endunless %}">
         {% if section.settings.footer_linklist_heading_three != blank %}<h3>{{ section.settings.footer_linklist_heading_three }}</h3>{% endif %}
         {% for link in linklists[footer_linklist_three].links %}
           <li class="site-footer__linklist-item">
             <a href="{{ link.url }}">{{ link.title }}</a>
           </li>
         {% endfor %}
       </ul>
     {% endif %}
</div>

<div class="grid__item{% if menu_links == 3 %} medium-up--one-third{% elsif menu_links == 2 %} medium-up--one-half{% elsif menu_links == 4 or section.settings.footer_newsletter_enable %} medium-up--one-quarter{% else %} text-center{% endif %}">
  {%- assign footer_linklist_four = section.settings.footer_linklist_four -%}
     {% if linklists[footer_linklist_four].links.size > 0 %}
       <ul class="site-footer__linklist{% unless section.settings.footer_newsletter_enable %} site-footer__linklist--center{% endunless %}">
         {% if section.settings.footer_linklist_heading_four != blank %}<h3>{{ section.settings.footer_linklist_heading_four }}</h3>{% endif %}
         {% for link in linklists[footer_linklist_four].links %}
           <li class="site-footer__linklist-item">
             <a href="{{ link.url }}">{{ link.title }}</a>
           </li>
         {% endfor %}
       </ul>
     {% endif %}
</div>

###3. We also need to make sure things work when the newsletter is enabled. So find:

{% if section.settings.footer_newsletter_enable %}
<div class="grid__item medium-up--one-half">

###And replace the grid_item class with:

{% if section.settings.footer_newsletter_enable %}
<div class="grid__item {% if menu_links == 3 %} medium-up--one-third{% elsif menu_links == 2 %} medium-up--one-half{% elsif menu_links == 4 %} medium-up--one-quarter{% else %} medium-up--one-half{% endif %}">

###4. Replace the schema with the following:

{% schema %}
  {
    "name": "Footer",
    "settings": [
      {
        "type": "text",
        "id": "footer_linklist_heading",
        "label": "Primary menu heading",
        "default": "Heading"
      },
      {
        "type": "link_list",
        "id": "footer_linklist",
        "label": "Primary menu",
        "default": "footer"
      },
      {
        "type": "text",
        "id": "footer_linklist_heading_two",
        "label": "Additional menu heading",
        "default": "Heading"
      },
      {
        "type": "link_list",
        "id": "footer_linklist_two",
        "label": "Additional menu",
        "default": "footer"
      },
      {
        "type": "text",
        "id": "footer_linklist_heading_three",
        "label": "Third menu heading",
        "default": "Heading"
      },
      {
        "type": "link_list",
        "id": "footer_linklist_three",
        "label": "Third menu",
        "default": "footer"
      },
      {
        "type": "text",
        "id": "footer_linklist_heading_four",
        "label": "Fourth menu heading",
        "default": "Heading"
      },
      {
        "type": "link_list",
        "id": "footer_linklist_four",
        "label": "Fourth menu",
        "default": "footer"
      },
      {
        "type": "checkbox",
        "id": "footer_newsletter_enable",
        "label": "Show newsletter signup",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_payment_icons",
        "label": "Show payment icons",
        "default": false
      }
    ]
  }
{% endschema %}

###5. Add this to the theme.scss file:

.site-footer__linklist--center .site-footer__linklist-item {
  display: block;
  padding: 2px 2px;
  @include media-query($small) {
    display: inline-block;
  }
}