Google Charts - How can I get the legend to collapse down on a mobile device

I hope someone can please help me.

I've got a pie chart on a web page using Google Chart. I've popped the code below.

The problem I am having is that I want the legend which is on the right hand side when on a desktop screen to move underneath the pie chart when being viewed on a mobile device.

I've seen some posts about this, but they didn't quite give me what I needed and were not new.

Can anyone please advise, I'd be very grateful!

      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Toppings');
        data.addColumn('number', 'Cost in pence');
        data.addRows([
          ['Cheese: 42 pence', 42],
          ['Ham: 21 pence', 21],
          ['Pepparami: 4 pence', 4],
          ['Anchovies: 11 pence', 11],
          ['Chicken: 3 pence', 3],
          ['Pineapple: 7 pence', 7],
          ['Beef: 12 pence', 12]
        ]);

        // Set chart options
        var options = {'title':'How much are your toppings?',
    tooltip: {isHtml: true},
                       chartArea:{left:0,top:0},
                       'height':450,
                       width:680,
                       'pieHole':0.4,
                       'pieSliceText':'value',
                        colors: ['#fbc900', '#e6007e', '#ee7203', '#009a44', '#e22a1b','#95c11f','#0099b3'],
                         tooltip: {
            text: 'none'
        },
titleTextStyle: {color: 'black', fontName: 'Lato', fontSize: '1'},
pieSliceTextStyle: {fontSize: '20'},
legend: {textStyle: {fontSize: 12}}
};

  function resize() {
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
  window.onload = resize();
  window.onresize = resize;

}
</script>