Change view of Responsive GridView from Desktop to Mobile and vice versa using jQuery

Here I have created sample that will help you out.

HTML

<div>
    <style type="text/css">
        .Mobile
        {
            width: 20%;
        }
        .Desktop
        {
            width: 100%;
        }
    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=ddlView]").val('Desktop');
            var view = localStorage.getItem('ViewOfGrid');
            if (view != null) {
                if (view == 'Mobile') {
                    $('[id*=dvGrid]').addClass('Mobile');
                    $('[id*=dvGrid]').removeClass("Desktop");
                    $("[id*=ddlView]").val('Mobile');
                } else {
                    $('[id*=dvGrid]').addClass('Desktop');
                    $('[id*=dvGrid]').removeClass("Mobile");
                    $("[id*=ddlView]").val('Desktop');
                }
                localStorage.removeItem("ViewOfGrid");
            }
            $('[id*=GridView1]').footable();
            $('[id*=ddlView]').on('change', function () {
                if ($(this).val() == 'Mobile') {
                    localStorage.setItem("ViewOfGrid", "Mobile")
                } else {
                    localStorage.setItem("ViewOfGrid", "Desktop")
                }
                window.location.reload();
            })

        });
    </script>
    <div id="dvGrid" class="Desktop">
        <asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false"
            Style="max-width: 500px">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
            </Columns>
        </asp:GridView>
    </div>
    <div>
        <br />
        <br />
        <asp:DropDownList ID="ddlView" runat="server">
            <asp:ListItem Text="Mobile" />
            <asp:ListItem Text="Desktop" />
        </asp:DropDownList>
        <asp:HiddenField ID="hfView" Value="Normal" runat="server" />
    </div>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
        GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
        GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
}

Screenshot