Bootstrap datatables - multi-filter column search CSS issue

Question

What I am doing is to render table in HTML from Flask server. Bootstrap code I have referred to is from this link:

Bootstrap multi-filter

my HTML code:

<table id="example" class="table table-striped">
<thead>
    <tr>
        <th scope="col">Index</th>
        <th scope="col">Col2</th>
        <th scope="col">Col3</th>
        <th scope="col">Col4</th>
    </tr>
</thead>
<tbody>
 {% for item in rows %}
        <tr>
            <td><form action="/get1" method="POST"><button formtarget="_blank"
                        name="input" type="submit"
                        formaction="/get1"
                        value={{item[0]}}>{{item[0]}}</button>
            </form>
            </td>
            <td>{{ item[1] }}</td>
            <td>{{ item[2] }}</td>
            <td>{{ item[3] }}</td>
        </tr>
    {% endfor %}
</tbody>
<tfoot>
<tr>
                <th>Index</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
            </tr>
</tfoot>
  </table>

I have exactly the same JS files as shown in the Bootstrap website.

My objective is to get the search label and input box to the left, and 'show entries per page' label and dropdown to the right. For this I tried using following additional CSS, but it did not work as intended.

<style>
.dataTables_wrapper .col-md-6:nth-of-type(1){
order: 2;
}
div.dataTables_wrapper div.dataTables_filter label {
text-align: left;
}
div.dataTables_wrapper div.dataTables_filter input {
  width: 100%;
  margin: 5px;
}

div.dataTables_wrapper.dataTables_length select input{
    width: 100%;
}
</style>

When I open page it shows like this:

enter image description here

Where as my objective is to show the search box and #entries box as follows: enter image description here

I need some help to correct my CSS to achieve placing search on left and entries on right.