html5 - How to display data differently for different devices in MVC 5 -

suprisingly after numerous searches can't find solution or similar question, brain fart moment. want display data differently on different devices using media queries.

so on large devices want show in table form, , on mobile devices custom "listview".

i can achieve creating 2 loops through model so:

<div class="row display-large">     <!--table here-->     @foreach (var emp in model)     <!--each row--> </div>  <div class="row display-small">     @foreach (var emp in model)     <!--each custom list item--> </div> 

then using media queries, can show/hide relevant 1 (display-small/large). couldn't live myself doing this,it increases page size , bad practice, question how can achieve without duplicating html.

thanks in advance.

may can :

create global var somewhere on server side

public static class globalvars {      public static bool islarge {get; set;} } 

add controller this

[httppost] public actionresult setdisplaymode(bool islarge) {     globalvars.islarge = islarge;     return new httpstatuscoderesult(system.net.httpstatuscode.ok); } 

in view add:

<script>  var data = $( window ).width() > 720)? true : false;  $.post("@url.action("setdisplaymode", "$controllernamehere")", { islarge: data});      </script>  <div class="row display-small">     @foreach (var emp in model)     if(web.globalvars.islarge) { <!--each row-->} else { <!--each custom list item--> } </div> 

change $controllernamehere controller name