<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<p id="p1" class="box">I am an Art and Computer Science student. I love mixing my art background with web development and design. My goal is to find a job in the web development industry. In my spare time I love playing sports and board games.</p>
</div>
<div class="col-md-6">
<img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
2016.jpg" alt="filter for now: cat"></div>
</div>
</div>我正在使用CodePen并尝试使用引导网格分割这两个东西（p和img），它不会分裂。图像保留在段落下方。
您可能没有包含引导程序的链接。这里我链接头标签内的bootstrap cdn。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<p id="p1" class="box">I am an Art and Computer Science student. I love
mixing my art background with web development and design. My goal is to
find a job in the web development industry. In my spare time I love
playing sports and board games.</p></div>
<div class="col-md-6">
<img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
2016.jpg" alt="filter for now: cat"></div>
</div>
</div>
</body>
</html>