Table component creates useless html element when field sorting is used

Every field header that contains sorting small buttons (up/down arrows) renders next html element:
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" aria-sort="none" class="text-center"><div>Column name</div><span class="sr-only"> (Click to sort Ascending)</span></th>
where this part is a problem:
<span class="sr-only"> (Click to sort Ascending)</span>:

This breaks responsive design because on very small screens (especially mobile) UI becomes broken (see screenshots).

Steps to reproduce the bug

1. Create a page with Table component
2. Define multiple fields (the more - the better) that won't definitely fit into small screen (scroll bar must appear in this case)
3. Enable sorting for some fields (arrow buttons near column headings must appear in this case)
4. Open page on very small screen (you can use Chrome mobile view in Dev Tools)

I was able to reproduce it even with example page: https://bootstrap-vue.org/docs/components/table

Expected behavior

1. UI shouldn't break and it would be better to not have useless elements in DOM tree.
2. If table doesn't fit in parent width - it should have scrollbar and display only that part of a table that can fit.

Versions

Libraries:

• BootstrapVue: 2.21.2
• Bootstrap: 4.#.# (no matter)
• Vue: 2.#.# (no matter)

Environment:

• Device: Any
• OS: Any
• Browser: Chrome
• Version: any of latest

Additional context

Screenshots:

• When everything is correct
• When things get broken
• Inspector screenshot