jQuery Datatable DOM positioning for Buttons

You add new elements to the dataTables dom controls by using <'.class'> or <'#id'>. Example, insert a new <div id="colvis"> element to the left of the pagination, <'#colvis'> before p :

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"

colvis buttons has the class .buttons-colvis, so you move them permanently to the injected #colvis element by :

$('.buttons-colvis').detach().appendTo('#colvis')

This is the fast way to move the colvis button to another location.

---

Regarding @GreeKatrina's suggestion, yes - but the correct placement method is :

var colvis = new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            ... 
        }
   ]
})
colvis.container().appendTo('#colvis')

if you have a #colvis element of course.

---

My recommendation : Besides the above hardcoded solution, where you target the colvis buttons specifically, you could monkey patch dataTables buttons so each extended button can have a container option. After initialisation, the button is moved to the specified container :

var org_buildButton = $.fn.DataTable.Buttons.prototype._buildButton;
$.fn.DataTable.Buttons.prototype._buildButton = function(config, collectionButton) {
   var button = org_buildButton.apply(this, arguments);
   $(document).one('init.dt', function(e, settings, json) {
       if (config.container && $(config.container).length) {
          $(button.inserter[0]).detach().appendTo(config.container)
       }
   })    
   return button;
}

use the container option :

{
   extend: 'colvis',
   postfixButtons: [ 'colvisRestore' ],
   container : '#colvis', //<---
   columns: '0,1,2,3,4,5'
}

demo -> http://jsfiddle.net/v4bLv83h/

As the example demonstrates, you can now specify an alternative container for each and every button. Note that container can be any element, it does not have to be an element injected by dom. Also note (as you may notice in the fiddle) that you need to do some styling if you want to make injected elements flow properly along with the native control elements, such as the pagination block.

I'm not an expert with the data tables library, but the documentation says you can have multiple collections of buttons and insert them separately. It also has an example for multiple button groups that you could use instead of putting "B" multiple times in the dom option, which I don't think is valid.

Combining the examples from the documentation and your example (not tested):

var table = $('#myTable').DataTable( {
    dom: "B<'#colvis row'><'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>",
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5'
    ]
} );

new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            // Shorter than using the language.buttons.colvis option
            text: 'Change columns',
            postfixButtons: [ 'colvisRestore' ],
            columns: '0,1,2,3,4,5,6'
        }
    ]
} );

// To append it at the bottom of the table
// 3 since the colvis button is at the 3rd index in the buttons array
table.buttons( 3, null ).container().appendTo(
    table.table().container()
);

// To append it on the first row after the buttons, in the #colvis row
table.buttons( 3, null ).container().appendTo(
     $('#colvis'), table.table().container()
); 

If it doesn't work let me know and I'll update my answer.