hide DIV and replace with a DIV if window is narrower than

Question

I found this topic Hide A DIV if screen is narrower than 1024px and I want to get something similar with quoted code below, a code for this kind of response: to hide one div ( id="krug_wide" ) if a window is narrower then 1280px and to replace that hidden div with another one ( id="krug_small" ).

I also found out the page http://www.fryed.co.uk/labs/resize_div_on_window_resize connected with mentioned topic. I still can not figure out the right and appropriate syntax but I'm sure it is "a piece of cake" for you.

Thank you in advance.

$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1024) {
        $("#krug_wide").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

Answer 1

You can use Media Queries ou have example on this link

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

with on CSS

@media screen and (max-width: 1280px) {
    //Some property here
    #krug_wide{
       ...
    }
}

Or create different CSS

<link rel="stylesheet" media="screen and (max-width:1280px)" href="example.css" />

You have many example on W3C Media Queries

Answer 2

Apply the following mediaquery in css

@media only screen (max-device-width: 1023px) {
  .content { // Your div's class name to hide
     display: none;
  }
}