Tengo la siguiente cuestión: estoy usando la librería datatables, para que me muestre en formato móvil, la segunda y tercera columna como despegable y no haga un colapso automaticamente empezando por la ultima columna, es decir quiero que quede como veis en la imagen pero en vez de la descripción que se visualize opciones con los botones y cuando haga un click sobre nombre pues se me despliegue tanto la descripcion como los jugadores
$(document).ready(function() {
$('#example').dataTable({
"searching": false,
"paging": false,
"ordering": false,
"info": false,
"type": "column"
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css' />
<table id="example" class="display responsive nowrap dtr-inline collapsed" style="width:100%">
<thead>
<tr style="background-color:grey;">
<th>Nombre</th>
<th>Descripción</th>
<th>Jugadores</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Miguel</td>
<td>Jugador de futbol</td>
<td>5</td>
<td>
<button>Borrar</button>
<button>Editar</button>
</td>
</tr>
<tr>
<td>Miguel</td>
<td>Jugador de futbol</td>
<td>5</td>
<td>
<button>Borrar</button>
<button>Editar</button>
</td>
</tr>
<tr>
<td>Miguel</td>
<td>Jugador de futbol</td>
<td>5</td>
<td>
<button>Borrar</button>
<button>Editar</button>
</td>
</tr>
</tbody>
</table>