实现响应式两栏布局可以使用CSS中的float属性和media query媒体查询，实现响应式三栏布局可以使用CSS中的float属性、flexbox布局和media query媒体查询。
使用float属性可以将两个元素分别浮动到页面的左右两侧，代码如下：
<p>这是左侧内容</p>
<p>这是右侧内容</p>p {
box-sizing: border-box;
width: 50%;
float: left;
padding: 10px;
}
@media screen and (max-width: 768px) {
p {
width: 100%;
float: none;
}
}以上代码表示在屏幕宽度小于等于768px时，两个元素都会变成100%宽度并且不再浮动。
使用float属性可以将三个元素分别浮动到页面的左中右三侧，代码如下：
<p>这是左侧内容</p>
<p>这是中间内容</p>
<p>这是右侧内容</p>p {
box-sizing: border-box;
width: 33.33%;
float: left;
padding: 10px;
}
@media screen and (max-width: 768px) {
p {
width: 100%;
float: none;
}
}以上代码表示在屏幕宽度小于等于768px时，三个元素都会变成100%宽度并且不再浮动。
使用flexbox布局可以更加方便的实现三栏布局，并且可以实现更加灵活的布局。代码如下：
<div class="container">
<div class="left">这是左侧内容</div>
<div class="middle">这是中间内容</div>
<div class="right">这是右侧内容</div>
</div>.container {
display: flex;
}
.left, .middle, .right {
flex: 1;
padding: 10px;
}
.left {
background-color: #ffd54f;
}
.middle {
background-color: #4fc3f7;
}
.right {
background-color: #ff8a65;
}
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}以上代码表示在屏幕宽度小于等于768px时，三个元素会纵向排列。