js和jquery的Responsiv网站错误

Question

你好，我是js和jquery的新手，我正在制作一个响应站点，但是它不起作用。关键是要有一个响应站点，当它下降到599px时，应删除“导航”，然后将2个div放在左边，另一个放在右边。但显然js / jquery不是。因此，如果任何人有精力看到我做错了什么，并让我正确地做对，我将不胜感激。谢谢，我有这段代码：

dt <- fread("     ID  V1  V2  V3  V4  V5  V6  V7  V8  V9 V10   limit
     10167638  89  NA 116 102  96  NA 106 116  NA 144     3
     10298462  74 114  NA  NA 114  NA 121 111  98 108     6
     10316168  88  78  NA  77  72  96  NA  95  NA  NA     4
     10423491 118  77  NA  86 139 127  NA 103  93  84     2
     10497492  12 154  NA 121 121 114 111  NA  NA  NA     7
     10619463  42  NA  NA  NA  NA  NA  NA  NA  NA 141     9
     10631362 174  NA 125 118 117 116 139 116  NA 104    10
     10725490  49  NA 175  NA 176  NA 139 123 140 141     5
     10767348 140 106 174 162  NA 169 140 127 112  NA     6
    110832134  10 178  NA  NA 116  95  95 125 115 103     3")

function myFunction(x) {
    if (x.matches) { // If media query matches
        $( '.nav' ).remove();
        $('#bakgrund').before('<div class="left>  <ul class="nav">
            <li><a href="index.html">Hem</a></li>
            <li><a href="#produkter">Produkter</a></li>
            <li><a href="#nyaprodukter">Nya Produkter</a></li>
          </ul></div>');
        $('#bakgrund').before('<div class="right">  <ul class="nav">
            <li><a href="#nyheter">Nyheter</a></li>
            <li><a href="#kontakta_info">Kontakta oss/Info</a></li>
            <li><a href="#hjälp">Hjälp</a></li>
          </ul></div>');
    } else {
        $( ".left" ).remove();
        $( ".right" ).remove();
    }
}

var x = window.matchMedia("(max-width: 599px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

@charset "utf8";

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
li {
  width: auto;
  margin-right: 8px;
  font-size: 34px;
  float: left;
}
.nav li a {
    display:block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
.nav li a:hover {background-color: #111;
}


.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}

body {
  height: 100%;
}
img {
  max-width:100%;
  height:auto;
}