I want to manually adjust the columns of datatables on certain breakpoints. All I want is to show all the columns in responsive but only adjust the columns width. Is that possible on datatables?

Here's my example code:

<table id="test_table" align="center">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Symbol</th>
            <th>Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>test name</td>
            <td>USD</td>
            <td>$21,000</td>
        </tr>
    </tbody>
</table>

<script>
    $('#test_table').DataTable({
        ordering: false,
        scrollX: true,
        lengthMenu: [[10, 25, 50], [10, 50, 100]],
        language: {
            search: '',
            searchPlaceholder: "Search...",
            info: "Showing _END_ of _TOTAL_ entries",
            lengthMenu: "<b class='mr-8'>Rows</b> _MENU_ ",
            paginate: {
                next: '<i class="fas fa-chevron-right"></i>',
                previous: '<i class="fas fa-chevron-left"></i>'
            }
        },
        columnDefs: [
            { width: "120px", targets: 0 },
            { width: "150px", targets: 1 },
            { width: "120px", targets: [2, 3] },
        ],
    });
</script>

I set my columns to a certain width using columnDefs on desktop. So what I want is to adjust it when it reaches certain breakpoints like this:

/*Breakpoint - 767px */
columnDefs: [
    { width: "40px", targets: 0 },
    { width: "60px", targets: 1 },
    { width: "90px", targets: [2, 3] },
],

Is this possible on dataTables? if yes, can you show me some examples to help me guide through it? I'm new to datatables.