Responsive Foundation Orbit Image Gallery
First, I think you'd be better off if you had a representation of the gallery
as data (following the Rule of Representation).
It would go something like this:

A Simpler Method

Get your objects into memory. These can come from a REST API, or you could drop
this into the dom when you're rendering server side. However you like.

var gallery = [
  {
    title: "An image",
    src: "http://placehold.it/1400x348",
    width: 1400,
    height: 348,
    body: 'More hence euphemistic...',
    active: true,
    index: 0
    // any property you'll need to render this item goes here
  },
  // etc...
]


You can have the rendering code that consumes this list. The example shown uses
hyperscript.

var h = require('hyperscript')

function renderOne (slide) {
  h('li', {index: slide.index},
    h('img', {src: slide.src, width: slide.width}),
    h('section', slide.body)
    // and so on...
  )
}
function render (gallery) {
  h('ul#slider', gallery.map(renderOne))
}
// use it like this:
$('body').html(render(gallery))


Then you can listen for events on the containing element and modify the data
accordingly.

$('body').on('click', 'li', function (e) {
  var index = parseInt($(e.currentTarget).attr('index'), 10)
  gallery.forEach(function (slide){
    slide.active = false
  })
  gallery[index].active = true
})


With every property necessary for rendering held in the data representation,
your rendering logic can be very simple. Simple logic is easy to reason about
and breeds fewer bugs. To get an accurate dom after any change, all you need to
do is rerun:

$('body').html(render(gallery))


What about performance? There are excellent tools that abstract the dom into a
virtual dom that determines the minimal change necessary to get the current dom
to match the dom you want. Use those tools (like mercury
  or react).

If you're looking for another example, I did a similar post here.

The Original Method

That would be a significant change in method, however. Here's some ways to make
your current method easier to reason about for a newcomer to your codebase
(See it in action on jsbin here). Note: it was a style choice to omit semicolons and rely on automatic semicolon insertion.

Foundation now has a debounce function in its utils. May as well use that.

var debounce = window.Foundation.utils.debounce
var $copy, isSmall


You might also listen to requestAnimationFrame to get resize events. I left this
as resize.

// Call the script on resize (must support ie8)
var listen = window.addEventListener ? window.addEventListener : window.attachEvent
listen('resize', debounce(checkGallery), 250)


The logic is easy to follow if methods are mostly in the order they're called.

$(function(){
  // when swapping widgets, clone original state
  $copy = $('#slider').clone()
  checkGallery()
})


Descriptive names for complex boolean questions tend to increase clarity.

function checkGallery () {
  var wasSmall = isSmall
  isSmall = window.matchMedia('(max-width: 767px)').matches

  // only swap widgets if necessary
  if (wasSmall !== isSmall) initGallery(isSmall)
}

function initGallery (small) {
  // reset to inital state
  $('#hero').html(clone())

  if (small) {
    initAccordion()
  } else {
    initOrbit()
  }
}


This retains the selected slide when swapping widgets. I believe this is
not how the original worked, but I believe this was a desired behavior. I'd
point out that this logic is hard to follow for a newcomer to your codebase.
This function is a good example of why simple rendering logic + more complex
data structure is the way to go.

function clone () {
  $html = $copy.clone()

  // retain active item
  index = $('#slider &gt; li').index($('#slider &gt; li.active'))
  console.log('index', index)
  if (index &gt; -1) $html.find('&gt; li:eq('+index+')').addClass('active')

  return $html
}


This way, we don't bring foundation JavaScript into the mix unless we're using
it.

function initAccordion () {
  $('#slider').on('click', 'li', function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active')
  })
}

function initOrbit () {
  $('#slider').attr('data-orbit', '').foundation({
    orbit: {
      slide_number: false,
      timer: true,
      timer_speed: 8000,
      next_on_click: false
    }
  })
}


The only change necessary in CSS is this:

@media screen and (max-width: 767px) {
  #slider &gt; li .slider-content {
    display: none;
  }
  #slider &gt; li.active .slider-content {
    display: block;
  }
}