JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.js"></script>
<nav class="ui inverted sidebar menu vertical visible slide out" id="m_menu">
<a href="#" class="item">
    <i class="home icon"></i>Home 1
  </a>

  <a href="#" class="item">
    <i class="user icon"></i>User
  </a>

  <a href="#" class="item">
    <i class="archive icon"></i> Portfolio
  </a>
</nav>

<div id="menuDiv">
  <nav class="ui inverted fluid four item pointing menu" id="menu">

    <a href="#" class="item">
      <i class="home icon"></i>Home
    </a>

    <a href="#" class="item">
      <i class="user icon"></i>User
    </a>

    <a href="#" class="item">
      <i class="archive icon"></i> Portfolio
    </a>

    <a href="#" class="item">
      <i class="message icon"></i> Contact
    </a>

  </nav>

  <div class="ui labeled icon button black" id="m_btn">
    <i class="icon list layout"></i> Menu
  </div>
</div>


<img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs">

CSS

body{
 margin:0;
  padding:0;
  font-family:"helvetica",arial;
}

#menuDiv{
 /* margin:40px 40px 0 40px;*/
  text-align:center;
}

#menu:{
  max-width:1024px;
  margin:0 auto;
}

#m_btn{
    display:none;
    background-color:red;
}

#m_menu {
    background-color:#ccc;
}
#menuDiv {
    background-color:#ddd;
}
img{
  width:100%;
  height:auto;
  position:absolute;
  top:0;
  z-index:-1;
}

@media all and (max-width:630px) {
  #menu{
      display:none;
    }
    /* Added this */
    #m_menu {
        display:block;
    }
  #m_btn{
    display:inline-block;
  }
}

/*fails to fix sidebar sidebar showing @width>=631px*/
@media all and (min-width:631px) {
    /*suggested on tutsplus,no change on applying*/
    body.pushable{margin-left:0 !important;}
  
    /* New stuff here*/
    #m_menu {
        display:none;
    }
    #menu{
      display:block;
    }
  #m_btn{
    display:none;
  }    
}

JavaScript

$(function(){
  $('#m_btn').on('click',function(e){
    e.preventDefault();
    $('#m_menu').sidebar('toggle');
  });
});

$(window).resize(function() {
    // Detect if the resized screen is mobile or desktop width
    if($(window).width() > 617) {
        console.log('desktop'); 
        $('#m_menu').sidebar('hide');
    }
    else {
       console.log('mobile');
    }
});