Html 调整窗口大小时，如何防止元素移动和/或调整大小？

我知道这个问题已经被问了无数次了，我已经看过了。好的，我目前正在一个网站上工作，只是为了个人练习，我从做布局开始。它上面有一个Boostrap网格系统，我们正在查看的特定区域有两个col-md-3和一个col-md-6，我们正在查看col-md-6

基本上，我是在假装为一家企业创建一个网站，它可以举办聚会和活动等，从ID和类的名称可以明显看出这一点

正如我们从屏幕截图中看到的，当我调整窗口大小时，较大的事件div中的#h1、#event段落和.event在我调整页面大小时都会被移动和混乱

我正试图实现两件事中的任何一件，严格按照桌面视图进行，完全不移动，或者使其与移动设备和平板电脑兼容，并使移动和调整大小反映这些变化。我想为这两个代码解决方案

以下是图像结果：

这就是它最初的样子

然后，当我按下浏览器上的“向下还原”按钮时，就会发生这种情况 那么这就是我进一步缩小浏览器时的结果

这是当前的代码

CSS

#Events {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 300px;
min-width: 90%;
margin-top: 20px;
margin-left: 25px;
overflow: auto;
}

#Party {
height: 150px;
width: 150px;
border-color: black; 
border-width: 1px; 
border-style: solid;
float:right;
margin-right:15px;
margin-top: 65px;
border-radius: 75px;
}

#h1 {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 50px;
min-width: 300px;
float:left;
margin-left: 15px;
margin-top: 15px;
}

#EventParagraph {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 150px;
width:330px;
margin-left: 15px;
margin-top:70px;
}

.event {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 50px;
width: 200px;
background-color: white;
margin-left: 15px;
margin-top: 10px;
}

.event h1 {
font-family: Friday Night Lights, sans-serif;
height:inherit;
}

HTML

<div class="row">
    <div class="col-md-3" style="border-color: black; border-width: 1px; border-style: solid; height: 350px">
        <div id="SocialMedia">
            khkhkh
        </div>
    </div>
    <div class="col-md-6" style="border-color: black; border-width: 1px; border-style: solid; height: 350px">
        <div id="Events">
            <div id="h1">
            </div>
            <div id="Party"></div>
            <div id="EventParagraph"></div> 
            <div class="event"></div>
        </div>
    </div>
    <div class="col-md-3" style="border-color: black; border-width: 1px; border-style: solid; height: 350px">
        <div id="SocialMedia">
            khkhkh
        </div>
    </div>
</div>

khkhkh
khkhkh

.container{
保证金：0自动；
填充：0；
宽度：90%；
最小高度：900px；
边框：1px纯黑；
}
#标题#jumbotron{
宽度：继承；
边框：1px纯黑；
保证金：0px自动；
文本对齐：居中；
颜色：白色；
}
#标题{
背景颜色：蓝色；
}
#巨无霸{
背景颜色：灰色；
最小高度：150px；
线高：149px；
}
#聚会容器{
宽度：继承；
最小高度：400px；
利润率：10px自动；
边框：1px纯黑；
框大小：边框框；
}
.partyItem{
宽度：30%；
最小高度：200px；
边框：1px纯黑；
显示：内联块；
填充：10px；
框大小：边框框；
边缘顶部：10px；
左边距：25px；
}
#页脚{
文本对齐：居中；
边缘顶部：20px；
}
@仅介质屏幕和（最大宽度：768px）{
.partyItem{
显示：块；
宽度：90%；
保证金：0px自动；
}
}

公司1
为你组织聚会
&复印件2017