Create responsive KendoGrid in ASP.Net MVC

hi,

I have a gried view that included column side by side, I want to show design under when users visit in mobile device.

public ActionResult AddCash()
{
    var model = new CashModel();      
    return View(model);
}

@using BusinessToCustomers.EntityModel
@model BusinessToCustomers.EntityModel.CashModel
 
<div class="col-md-12">
    <div class="card">
        <div class="card-body p-0" style="margin-top: -35px">
            @(Html.Kendo().Grid<CashModel>()
                .Name("CashTrans")                               
                .Columns(columns =>
                {
                    columns.Bound(p => p.CLNAME).EditorTemplateName("FillCustomers").Title("Customer Details").Width(150);
                    columns.Bound(p => p.AMOUNT).Title("Tutar").Width(80).Format("{0:0.##}");
                    columns.Bound(p => p.DETAILS).Title("Detail Notes").Width(90).HtmlAttributes(new { @maxlength = "50" });
                    columns.Command(c =>
                    {
                        c.Edit().UpdateText("Save").CancelText("Cancel").Text("Update");
                    }).Width(180);
                })
                )
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Scrollable(s => s.Height(200))
                .HtmlAttributes(new {style = "height: 200px;"})
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model =>
                    {
                        model.Id(p => p.ID);
                        model.Field(p => p.CLNAME);
                        model.Field(p => p.AMOUNT);
                        model.Field(p => p.DETAILS);
                    })                                  
 
                    .Create(create => create.Action("CreateCash", "CashTransaction"))
                    .Update(create => create.Action("EditCash", "CashTransaction"))
                ))
        </div>
    </div>
</div>