It would not be possible to implement a solution within WP-Juicebox (without re-writing the plugin) but you could do the following with a standalone gallery.
(1) Listen for a change in the user's browser window size using JavaScript.
(2) Determine the new width of the user's browser window.
(3) If a specified width threshold has been crossed, then reload the gallery setting the new configuration options in the embedding code.
For example, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var a = '3', b = '3', c = 'LEFT', thresholdWidth = 600;
function loadGallery(a, b, c) {
new juicebox({
containerId: 'juicebox-container',
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
}
function thumbsStatus() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (windowWidth < thresholdWidth && c === 'LEFT' ) {
a = '10';
b = '1';
c = 'BOTTOM';
loadGallery(a, b, c);
}
if (windowWidth >= thresholdWidth && c === 'BOTTOM') {
a = '3';
b = '3';
c = 'LEFT';
loadGallery(a, b, c);
}
}
$(document).ready(function() {
thumbsStatus();
$(window).on('resize', thumbsStatus);
loadGallery(a, b, c);
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>