Bootstrap’s “table-responsive” and “pull-right” do not mix very well

I love working with Bootstrap!  It is a “must-have” in my ever growing toolbox of web development goodies. Bootstrap has many helper classes and other components that assist in speeding up the development process.  One of those that has come in pretty handy over the years is class="pull-right". When adding quick floats (pull-left for pull-right) and responsive tables, these things don’t always mix well.  I have found a solution to the table-responsive not actually being responsive!

What is “pull-right”?

Bootstrap has a helper class of class="pull-right".  Pretty much, it is a quick float right. Other than the more obvious things on a site you may use a float right for, this class is also helpful for sidebars.

Example: You are developing a site with a left sidebar, but when it gets down to mobile, you want the sidebar to fall to the bottom of the page, rather than the top (which is where it would naturally go if you put that code first in the theme file, or in the HTML file).  One possible solution for this is to put the code after the content area.  You would put a class="pull-right" on the content, and a class="pull-left" on the sidebar. This switches the order of the columns on desktop, and drops the sidebar below the content on mobile devices. Pretty cool huh?

Now, the problem with this is that if you need to add tables into the content (only for actual table content, no tables for layouts please!), the responsive table class (class="table-responsive" or the table in general freaks out. So, when viewing on a mobile device, when the table should get scrollbars, it just stays fixed. To fix this, I found that adding a mobile query to remove the float fixed the table, and it responded as expected. The code I used was:

I put this here in case anyone else comes across the same issue. Hopefully someone will find this useful in their coding adventures.

Happy Coding!