Autocomplete keyboard down arrow sequence

We are using a custom render method to create a layout with two columns using Bootstrap:

<Fragment>
    <div class="col col-lg-7">
        {querySuggestions}
        {elements.articles}
    </div>
    <div class="col col-lg-4 offset-lg-1">
        <div class="mt-3">
            {elements.categories}
            {elements.brands}
        </div>
    </div>
</Fragment >

When using the keyboard down arrow to move through the different items listed in the autocomplete, it goes down through the query suggestions first, then hops to the second column to move down through categories and brands and then back to the first column to move down through articles.

We want to move down through the articles before moving across to the second column. Is it possible to control the order of that?