为了更好地说明这个问题，下面是视频和jsfiddle。
<div class="container-fluid">
<div class="container">
<img src="https://image.com"/>
<h1>lorem ipsum dolor</h1>
</div>
当窗口有一定的宽度时，文本的一部分位于图像下方，另一部分则位于图像旁边。我如何防止文本分割，所以当窗口达到一定宽度时，整个短语"lorem ipsum dolor"会出现在图像下方，而不仅仅是"dolor"？我使用的是bootstrap，有没有专门的<div>类专门用于这件事？将文本放入CCD_ 2或CCD_。
我希望这会有所帮助。
body {
background-image: linear-gradient(to bottom right,#09845A, #8733DD);
}
.flex {
display:flex;
justify-content:center;
}
@media screen and (max-width:728px) {
.flex {
flex-direction:column;
align-items:center;
}
.img {
background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
width:100px;
}
}
.img {
background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
height:92px;
width:272px;
}
.container-fluid {
background: rgba(0,0,0,0.75);
}
.container {
display:block;
overflow:auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="flex">
<div class="img"></div>
<h1>
Ulecz się rozmową
</h1>
</div>
</div>
</body>这应该会有所帮助。https://www.w3schools.com/code/tryit.asp?filename=FY3DOVSFM4MZ
基本上你需要给col-sm-12这个告诉在小屏幕上使这个项目全宽。
为什么不尝试像这样使用列呢。
<div class="container-fluid">
<div class="container">
<div class="col-md-6 col-sm-12 col-xs-12">
<img src="https://image.com"/>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>lorem ipsum dolor</h1>
</div>
</div>