Restore filters on small screens

[jpmckinney]

Right now, they are hidden.

We'd need to implement a toggle, like in Bootstrap's own docs: https://getbootstrap.com/docs/4.6/getting-started/introduction/

[jpmckinney]

Might need to upgrade to Bootstrap 5.2 for responsive offcanvas.

[Camilamila]

A user from South Africa, send me an email about this:

"Well done on this excellent resource. It meets a key need to signpost this data.
One small thing I noticed. If you access this via a mobile device (or make your desktop page narrower) then the filters are no longer visible.
Ideally these would show at the top when the page is in this format."

[jpmckinney]

Copying notes from when I left off and had to move onto other tasks.

Included but not yet used:
offcanvas
visually-hidden

        <div class="row mb-4">
            <div class="col">
                <h2 class="h4">{% translate "Filters" %}</h2>
            </div>
            <div class="col-auto">
                <button class="btn d-md-none p-0 ms-3" type="button" data-toggle="collapse" data-target="#filters" aria-controls="filters" aria-expanded="false" aria-label="{% translate 'Toggle filters menu' %}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false" aria-label="{% translate 'Menu' %}">
                        <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/>
                    </svg>
                </button>
            </div>
        </div>