Javascript 对于所有屏幕尺寸，将一个导航中的第二个div设置为低于第一个div

我有一个页面，一个导航中有两个div。当屏幕大小的宽度超过1024px时，该页面中的所有内容看起来都是我想要的。但一旦我将宽度减小到小于768，2 div将与1 div“合并”，并将其显示为一行，而不是原来的2。我希望它仍然在两个不同的行时，屏幕大小减少

$（文档）.ready（函数（）{
var navpos=$（“#产品导航”）.offset（）；
控制台日志（导航位置顶部）
$（窗口）.bind（'scroll'，function（）{
if（$（window.scrollTop（）>navpos.top）{
$（“#产品导航”）.addClass（'fixed'）；
}否则{
$（“#产品导航”）.removeClass（'fixed'）；
}
});
});
.mc导航栏{
字号：17px；
背景色：#F8；
边框颜色：#ffffff；
页边距底部：0；
}
.navbar默认值.mc navbar品牌{
颜色：#3c6190；
}
.navbar默认值.mc navbar品牌：focus，
.navbar默认值.mc navbar品牌：悬停{
颜色：#3c6190；
}
.mc导航条对吗{
字体大小：16px；
右边距：0；
}
.mc合伙人资产净值{
背景色：#FFFFFF；
}
.mc合伙人{
右边距：20px；
文本对齐：右对齐；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
线高：30px；
字体：斜体；
字号：18px；
}
#标志{
边缘顶部：10px；
边缘底部：10px；
宽度：150px；
}







与
我想你可以解决这个问题。
Css有媒体查询功能

/* smartphone width+height */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
}

 /* smartphone width */
@media only screen and (min-width : 321px) {
}

 /* smartphone height */
@media only screen and (max-width : 320px) {
}

/* such as iPhone4 same high height*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* such as iPhone4 same hight width */
@media only screen and (min-width : 640px) {
}

/* iPad width+height */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

/* iPad width */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* iPad height */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

/* desktop browser width */
@media only screen and (min-width : 1224px) {
}

/* desktop browser height */
@media only screen and (min-width : 1824px) {
}

我想你可以解决这个问题。
Css有媒体查询功能

/* smartphone width+height */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
}

 /* smartphone width */
@media only screen and (min-width : 321px) {
}

 /* smartphone height */
@media only screen and (max-width : 320px) {
}

/* such as iPhone4 same high height*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* such as iPhone4 same hight width */
@media only screen and (min-width : 640px) {
}

/* iPad width+height */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

/* iPad width */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* iPad height */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

/* desktop browser width */
@media only screen and (min-width : 1224px) {
}

/* desktop browser height */
@media only screen and (min-width : 1824px) {
}

我已经使用引导
row
和
col-xs-12
类将
clearfix
应用到
.mc partner nav


.mc导航栏{
字号：17px；
背景色：#F8；
边框颜色：#ffffff；
页边距底部：0；
}
.navbar默认值.mc navbar品牌{
颜色：#3c6190；
}
.navbar默认值.mc navbar品牌：focus，
.navbar默认值.mc navbar品牌：悬停{
颜色：#3c6190；
}
.mc导航条对吗{
字体大小：16px；
右边距：0；
}
.mc合伙人资产净值{
背景色：#FFFFFF；
}
.mc合伙人{
右边距：20px；
文本对齐：右对齐；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
线高：30px；
字体：斜体；
字号：18px；
}
#标志{
边缘顶部：10px；
边缘底部：10px；
宽度：150px；
}





与
我已经使用引导
行
和
col-xs-12
类将
clearfix
应用到
.mc合作伙伴导航中


.mc导航栏{
字号：17px；
背景色：#F8；
边框颜色：#ffffff；
页边距底部：0；
}
.navbar默认值.mc navbar品牌{
颜色：#3c6190；
}
.navbar默认值.mc navbar品牌：focus，
.navbar默认值.mc navbar品牌：悬停{
颜色：#3c6190；
}
.mc导航条对吗{
字体大小：16px；
右边距：0；
}
.mc合伙人资产净值{
背景色：#FFFFFF；
}
.mc合伙人{
右边距：20px；
文本对齐：右对齐；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
线高：30px；
字体：斜体；
字号：18px；
}
#标志{
边缘顶部：10px；
边缘底部：10px；
宽度：150px；
}





与
我添加了媒体查询，但当屏幕尺寸小于768px时，它仍然合并到一行。我添加了媒体查询，但当屏幕尺寸小于768px时，它仍然合并到一行。这是您想要的吗？@link2pk是的！这正是我想要它做的。明白了，谢谢！：）是你想要的吗？@link2pk是的！这正是我想要它做的。明白了，谢谢！：）