不使用bootstrap，简单的实现页面自适应布局，基本思路就是分为两种情况，大屏幕设为左右结构，小屏幕使用css媒体查询器变为上下结构。

页面的基本元素如下：

<div class="container">
  <div class="content"></div>
  <aside class="sidebar"></aside>
</div>

基本样式如下：

.container {
position: relative;
max-width: 1200px;
}
.content {
width: 820px;
float: left;
}
.sidebar {
 width: 360px;
 float: right;
}

使用css的Media媒体查询器

@media (max-width: 1024px)
.container {
 margin: 0 5px;
}
.content {
 float: none;
 width: 100%;
}
.sidebar {
float: none;
width: auto;
margin: 2px;
}

参考：
设计网页，常见的宽度是多少像素
响应式和自适应的区别
如何进行自适应网页设计？