I’m working with jQuery DataTables and I’m trying to customize the layout of my DataTable, specifically the positioning of the control buttons. I want to move the DataTable buttons to a different location than the default. Here’s the current dom configuration I’m using:
dom: "<'row dom_wrapper fh-fixedHeader'B<'col-sm col-md'>f<'col-sm col-md'>i<'col-sm col-md'>l>" + "<'row'<'col-sm col-md'tr>>" + "<'row'<'col-sm col-md'i><'col-sm col-md'p>>",
This layout places the buttons (B), filtering input (f), table information (i), and length changing input (l) all in the same row. However, I would like to:

Move the buttons to a separate row above the search box.
Ensure the buttons are aligned to the right.
How can I modify the dom configuration to achieve this layout? Also, are there additional CSS changes needed to ensure proper alignment and responsiveness?

Any examples or guidance would be greatly appreciated!
the final design i been looking for is attached

enter image description here

I have failed to place all control as wanted!