<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- bootstrap3とjquery   -->
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="left_sidebar col-sm-3 hidden-xs">
      <p>Left Sidebar</p>
      <ul id="list">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
        <li>list5</li>
        <li>list6</li>
        <li>list7</li>
        <li>list8</li>
        <li>list9</li>
        <li>list10</li>
      </ul>
    </div>
    <div class="col-sm-6 main">
      <div>
        <h1>main content</h1>
        <h1>content1</h1>
        <h1>content2</h1>
        <h1>content3</h1>
        <h1>content4</h1>
        <h1>content5</h1>
        <h1>content6</h1>
        <h1>content7</h1>
        <h1>content8</h1>
      </div>
    </div>
    <div class="right_sidebar col-sm-3 hidden-xs">
      <p>Right Sidebar</p>
      <ul id="list">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
        <li>list5</li>
        <li>list6</li>
        <li>list7</li>
        <li>list8</li>
        <li>list9</li>
        <li>list10</li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>
.sidebar {
  display: none;
}

.main {
  background-color: green;
}

@media screen and (min-width: 768px) {
  .left_sidebar {
    background-color: yellow;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  .right_sidebar {
    background-color: yellow;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
  ul#list li {
    margin-bottom: 30px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.