这是我到目前为止的代码：https：//codepen.io/melliflul/pen/pen/gnbbme
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
</div>
这是小提琴，我认为这就是您正在寻找的
http://codepen.io/anon/pen/gnxkxd
<body>
<p id="main-heading">Our Menu</p>
<div class="outer-div col-md-4-sm-6">
<div class="container" id="chicken-block">
<p class="section-heading" id="chicken-heading">Chicken</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="outer-div col-md-4-sm-6">
<div class="container" id="beef-block">
<p class="section-heading" id="beef-heading">Beef</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="outer-div col-md-4-sm-12">
<div class="container" id="sushi-block">
<p class="section-heading" id="sushi-heading">Sushi</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
div.outer-div{
margin:0;
padding:0 15px;
}
div.container{
margin:0;
padding:40px 15px 15px 15px;
background-color:#f5f5f5;
border:2px solid black;
position:relative;
margin-bottom:20px;
}
p{
font-family:sans-serif;
font-size:100%;
}
p#main-heading{
text-align:center;
margin-top:30px;
margin-bottom:40px;
font-size:175%;
font-weight:bold;
}
p.section-heading{
font-size:125%;
font-weight:bold;
margin:0;
width:100px;
text-align:center;
padding:3px 10px;
border:2px solid black;
position:absolute;
top:-2px;
right:-2px;
}
p#chicken-heading{
background-color:#d59898;
}
p#beef-heading{
color:#f5f5f5;
background-color:#bd4341;
}
p#sushi-heading{
background-color:#e5d198;
}
@media (min-width:992px){
div.col-md-4-sm-6{
width:33.33%;
float:left;
}
div.col-md-4-sm-12{
width:33.33%;
float:left;
}
}
@media (min-width:768px) and (max-width:991px){
div.col-md-4-sm-6{
width:50%;
float:left;
}
div.col-md-4-sm-12{
width:100%;
float:none;
clear:both;
}
}
在您的编码epen上，您关闭了媒体查询行29（CSS），该线路29（CSS），该行无法正确使用Col-LG-*类。第二，您不定义Col-SM-12宽度。第三，您将COL-MD-6浮动在媒体屏幕最大宽度767px上，因此最后一列将占用Col-Md-6的宽度并将其浮动到左。因此，我编辑您的CodePen从第29行（CSS零件）中删除}，将Col-MD-6替换为上一列中的Col-Md-12，删除媒体查询最小宽度：768和最大宽度：991MD-*类，只是将其设置为最大宽度：991。对于媒体屏幕，768px将Col-md-*宽度替换为col-sm-*宽度。编辑codepen
建议：因此，基本上是Bootstrap框架，如果您使用此框架，则不需要写很多CSS。查看网格系统引导程序，并尝试了解视图系统。在下面，我使用Bootstrap添加了您的代码。请参阅代码，如果您有任何问题，请我发表评论。
* {
box-sizing: border-box;
}
h1 {
margin-bottom: 15px;
}
p {
border: 1px solid black;
background-color: maroon;
margin:10px 10px !important;/*I overwrite By default css of p tag so I used !important */
height: 200px;
font-family: Helvetica;
color: white;
}
div[class*='col-']{ /*this css selector get all the class start with col and apply those css into those class which start with col */
border: 1px solid green;
padding:0;
padding:0px ; /*By default each col-* get 15px padding-left and padding right so I add padding 0 for all those col*/
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solution to Module 2</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1 align="center">Our Menu</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
<div class="col-lg-4 col-md-12 col-sm-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id quam blandit.</p></div>
</div>
</div>
</body>