title: How to stop columns with datatables overlapping at certain awkward screen widths in an R Shiny app
body: <p>How do I control the point at which responsive columns in a Shiny page (using bootstrap) give up on trying to put all 12 columns on one page and go into mobile phone mode?</p>
  
  <p>I can reproduce my problem (but nowhere near as bad as my actual application) with this simple app. See how the right of the first two tables below has been obscured by the other tables. Basically, the desired behaviour is to put the three tables vertically in a single column at this screen width, but bootstrap will not do this until the screen width goes down another 100 pixels or so.</p>
  
  <p><a href="https://i.stack.imgur.com/X4DeM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X4DeM.png" alt="enter image description here"></a></p>
  
  <pre class="lang-r prettyprint-override"><code>
  library(shiny)
  library(DT)
  
  ui &lt;- fluidPage(
     fluidRow(
       column(4, DTOutput("t1")),
       column(4, DTOutput("t2")),
       column(4, DTOutput("t3"))
     )
  )
  
  my_cars &lt;- mtcars[, 1:3]
  names(my_cars) &lt;- c("A longish name", "Another longish name", "A particularly long and annoying name I can't change")
  
  server &lt;- function(input, output) {
    output$t1 &lt;-    DT::renderDataTable(my_cars, rownames = FALSE)
    output$t2 &lt;-    DT::renderDataTable(my_cars, rownames = FALSE)
    output$t3 &lt;-    DT::renderDataTable(my_cars, rownames = FALSE)
  
  
    }
  
  # Run the application 
  shinyApp(ui = ui, server = server)
  </code></pre>