Html 在宽屏幕上显示标题和标题下的段落不正确

我有以下代码，它使用bootstrap 4.0显示一个

，后面跟着一个

，如下所示：-

**********
********

试试这个

.myDiv{
显示器：flex；
弯曲方向：立柱；
}

h1**********
p************

发生这种情况的原因是因为您使用的是flex，默认情况下设置为row，当没有足够的空间时，它会自动换行。所以，在小屏幕上，它被包装成两行，但在大屏幕上，它是并排的

要缓解此问题，您需要将flex设置为列：

//I've added flex-column to the top div
<div row style="display:none" id="hideshow" class=" row justify-content-center flex-column">
<h1 style="color:#4d9b84 ;font-weight: 700;font-size:25px;margin-top: 15px; ">**********</h1>
<p style="color: #96999b; font-weight: 700; font-size: 100%; margin-bottom: 0px; margin-top: 15px; ">********</p>
</div>

//我已将flex列添加到顶部div
**********
********

为什么要投反对票？请在浏览器控制台中查看当您使用17英寸时会发生什么情况以及应用了什么级别screen@Sfili_81没有新的类，只有两个组件将显示在一起。就像它们在同一行上一样，“style=“display:none”也应该删除。因为显示器是柔性的。