<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>code2</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script type="application/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="application/javascript" src="js/bootstrap.min.js"></script> <style> div{border:1px solid red} </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 1<br/>胡大臣数胡大臣</div> <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 2</div> <div class="clearfix visible-xs"></div> <!--清除了3的浮动使得3排在1的下面--> <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 3</div> <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 4</div> </div> </div> </body> </html>