Use media query to turn css rule off at set screen width, and bootstrap grids

Question

I have a sidebar on the webpage I'm creating that I want to be:

1. Short and wide (width of screen) when the screen is below a set size.

   

2. Long and thin (length of screen) when the screen is above a set size

   

_{NB: I made those screenshots by manually deleting/adding the relevant CSS rules.}

The issue is I'm trying to use bootstrap and media queries to change column size and turn off the height, but I've not managed to so far.

@media screen and (max-width: 300px){
    /* Only apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color: hsl(115,75%,25%);
        height: calc(100vh - 5em) /*<-----never applied*/
    }
}
@media screen and (min-width: 300px){
    /* Don't apply the side bar height above screen width of 300px*/
    .sidebar-wrapper{
        padding: 7px 0px;
        margin: 0px;
        background-color: hsl(115,75%,25%);
    }
}

<div class="sidebar-wrapper col-md-2">
    <ul class="sidebar-nav">
        <li class="sidebar-brand sidebar-item">
            <a href="#">
               Malmesbury Tandoori
            </a>
        </li>
        {%for section in foodcategory_list%}
        <li class = "sidebar-item">
            <a href="#{{section.name}}">{{section.name}}</a>
        </li>
        {%endfor%}
    </ul>
</div>
<div class = "menu-wrapper col-md-10">
    <h2>Menu</h2>
    <table>
        .....table stuff........
    </table>
</div>

I've hunted around for explanations and tutorials but I can't figure out why my rules aren't applying.

Could someone help me?

Answer 1

This might work or give you some ideas. You can change the sidebar width/height from fixed to 100% at your media query without using columns. See example.

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}
.sidebar-left {
  background: green;
  color: white;
  padding-top: 25px;
  font-size: 14px;
}
.sidebar-left ul {
  list-style: none;
  text-align: left;
}
@media (min-width: 480px) {
  .main-wrapper {
    padding: 5px 20px;
    margin: 0 auto;
  }
  .sidebar-left {
    width: 150px;
    height: 100%;
    float: left;
    overflow: hidden;
    overflow-style: auto;
    position: absolute;
  }
  .content-container-right {
    height: 100%;
    overflow: auto;
    overflow-style: auto;
    position: relative;
    margin-left: 150px;
    overflow-x: hidden;
    /*border:5px solid #fff;*/
  }
}
@media (max-width: 479px) {
  .main-wrapper {
    padding: 5px 10px;
    margin: 0 auto;
    width: 100%;
  }
  .sidebar-left {
    background: green;
    height: 100%;
    width: 100%;
  }
  .sidebar-left ul {
    padding-right: 20px;
  }
  .sidebar-left ul > li {
    display: inline-block;
  }
  .content-container-right {
    height: 100%;
    margin-left: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<img src="http://placehold.it/2500x500/f5f5f5/ff0?text=Image" class="img-responsive">
<div class="content-wrapper">
  <div class="sidebar-left">
    <ul>
      <li>
        <p>Sidebar 0</p>
      </li>
      <li>
        <p>Sidebar 1</p>
      </li>
      <li>
        <p>Sidebar 2</p>
      </li>
      <li>
        <p>Sidebar 3</p>
      </li>
      <li>
        <p>Sidebar 4</p>
      </li>
      <li>
        <p>Sidebar 5</p>
      </li>
      <li>
        <p>Sidebar 6</p>
      </li>
      <li>
        <p>Sidebar 7</p>
      </li>
      <li>
        <p>Sidebar 8</p>
      </li>
      <li>
        <p>Sidebar 9</p>
      </li>
      <li>
        <p>Sidebar 10</p>
      </li>
      <li>
        <p>Sidebar 11</p>
      </li>
      <li>
        <p>Sidebar 12</p>
      </li>
      <li>
        <p>Sidebar 13</p>
      </li>
    </ul>
  </div>
  <div class="content-container-right">
    <div class="main-wrapper">
      <div class="container">
        <h2>Menu</h2>

        <div class="table-responsive">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>