Setting column widths using bscols in crosstalk package

Question

I have the following simple example of using bscols method (bootstraps columns) as part of the crosstalk package in R. While setting widths = c(6, 6) works, it seems to set the default column sizes as col-xs-6

I'm wondering how to customize this, so that for example the columns would stack (i.e. collapse) when resized to small, i.e. col-xs-12. Or really any further customization of the columns i.e. col-md, col-lg

I see the bscols documentation has the following parameter:

device = c("xs", "sm", "md", "lg"))

Which makes me think this is possible, but I don't see any examples of how to use this to achieve what I'm after, i.e. setting column widths based on device size.

barchart.js:

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)

var barHeight = Math.floor(height / data.length);

svg
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", function (d) {
    return d * width;
  })
  .attr("height", barHeight)
  .attr("y", function (d, i) {
    return i * barHeight;
  })
  .attr("fill", "steelblue");

RMarkdown:

library(r2d3)
library(crosstalk)

crosstalk::bscols(
  widths = c(6, 6),
   r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = "barchart.js", 
        width = 300, height = 200),
   r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20), script = "barchart.js", 
        width = 300, height = 200)
)