How to hide Table Information Summary when page is small?

BradleyO07

This is the dom for my data table currently.

"<'row'<'col-12 col-sm-6 col-md-4 col-lg-3'l><'col-md-4 col-lg-6 d-none d-md-block'><'col-12 col-sm-6 col-md-4 col-lg-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-md-5 'i><'col-md-7'p>>",

I currently would like to hide <'col-md-5 'i> when the page is small. What could I add to this that would hide the column and only show the pagination?

kthorngren

One option is to add a class, <'col-xs-3 col-md-5 'i> or <'hide-infocol-md-5 'i> for example, then use media query to hide the element at the desired width, for example:

@media (max-width: 576px) {
.hide-info {
  display: none;
  }
}

Live example:
https://live.datatables.net/vexozega/1/edit

Kevin