How can I change the location of Bootstrap Table Paginator?

I am using Bootstrap Table source CSS. I'd like to move the text and page size like the following from the bottom of the table to the top. Here is an example.

Showing 1 to 20 of 159 rows [20] rows per page`

looking at the code on https://live.bootstrap-table.com/example/welcome.html

Move the location of this div:

<div class="float-left pagination-detail">
      <span class="pagination-info">
      Showing 1 to 10 of 800 rows
      </span><span class="page-list"><span class="btn-group dropdown dropup">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="page-size">
        10
        </span>
        <span class="caret"></span>
        </button>
        <div class="dropdown-menu"><a class="dropdown-item active" href="#">10</a><a class="dropdown-item " href="#">25</a><a class="dropdown-item " href="#">50</a><a class="dropdown-item " href="#">100</a><a class="dropdown-item " href="#">All</a></div></span> rows per page</span></div>

move it after:

<div class="bs-bars float-left"><div id="toolbar">
  <button id="remove" class="btn btn-danger" disabled="">
    <i class="glyphicon glyphicon-remove"></i> Delete
  </button>
</div></div>

instead of its original location, which is inside <div class="fixed-table-pagination">...</div>