asp.net c# panel screen size change

Question

I want to remove one menu an replace it with another when my screensize is 480px.

I think the easiest way for me is to create two panels, then set menu1 to false when screen size is < 480px - and menu 2 to true

and when the screen size is > 481px menu2 to false and menu1 to true, you know:

if (... < 480)
{
menu1.Visible = false;
menu2.Visible = true;
}

if (... > 481)
{
menu1.Visible = true;
menu2.Visible = false;
}

Is this possible. Im using bootstrap if this gives you a better picture. Thanks.

Answer 1

A simple bootstrap solution could be using the hidden class. Your two menus could be as follows:

<div class="hidden-xs hidden-sm">

</div>

<div class="hidden-md hidden-lg">

</div>

The first div would be hidden on extra small and small displays. The second div would be hidden on medium and large displays. If you wanted to be more precise on screen size I would say use the CSS Media Query.