Css 如何在不同的显示中将块大小从百分之五十更改为完整'；s

我有两个块

navbarfooter linksleft

和

navbarfooter linksright

分别定义了6个引导块。如果你看一个大屏幕的宽度，你会发现当大屏幕水平对齐一块时

问题：如何将它们（对于小屏幕）正确对齐一个块 位于另一个之上。即

navbarfooter linksleft

必须位于

navbarfooter链接右侧

每个块之间应该有两个元素的边界

.navbarfooter链接{
显示器：flex；
利润率：15px0；
}
.navbarfooter链接左侧、.navbarfooter链接右侧{
显示：内联块；
}
.navbarfooter链接{
文本对齐：右对齐；
}
.navbarfooter链接右侧{
文本对齐：左对齐；
}
.navbarfooter链接右：之前{
内容：“；
显示：内联块；
高度：10px；
宽度：1px；
背景色：hsla（0,0%，4%，0.3）；
利润率：0.15px；
指针事件：无；
}
.navbarfooter主链接：第n个子项（n+2）：之前{
内容：“；
显示：内联块；
高度：10px；
宽度：1px；
背景色：hsla（0,0%，4%，0.3）；
利润率：0.15px；
指针事件：无；
}
.navbarfooter主链接{
空白：nowrap；
}
.navbarfooter主链接{
字号：17px；
显示：内联块；
空白：nowrap；
填充物：5px；
}

---

我建议您更改结构，并在媒体查询中使用flex wrap属性。 代码：

---

首先添加引导库。我希望这会有帮助。

你知道那些类中

col-

后面的部分是什么意思吗…？如果是，这就是你的答案。如果没有，请阅读这些引导基础知识。@bootstrap 4 col中的CBroe表示柱体的完整大小，您可以从我这里得到sir+1:）我不知道您建议的flex warp属性，但我将在我的项目中学习和使用它s@Spectr ;) 很抱歉输入错误，属性为flex wrap

<div class="navbarfooter-links container">
<div class="navbarfooter col-xs-12 no-padding">
    <div class="navbarfooter-mainlink"><a class="navbarfooter-anchor" href="">CAREERS</a></div>
    <div class="navbarfooter-mainlink"><a class="navbarfooter-anchor" href="">ABOUT</a></div>
    <div class="navbarfooter-mainlink"><a class="navbarfooter-anchor" href="">SUPPORT</a></div>
    <div class="navbarfooter-mainlink"><a class="navbarfooter-anchor" href="">CONTACT US</a></div>
    <div class="navbarfooter-mainlink"><a class="navbarfooter-anchor" href="">PRESS</a></div>
    <div class="navbarfooter-mainlink"><a class="navbarfooter-anchor" href="">API</a></div>
</div>

.navbarfooter {
  display: inline-block;
}
.navbarfooter {
 display: flex;
 justify-content: center;
 margin: 0 auto;
}
.navbarfooter-mainlink:nth-child(n+2):before {
 content: ""; 
 display: inline-block; 
 height: 10px; 
 width: 1px; 
 background-color: hsla(0,0%,4%,.3); 
 margin: 0 15px; 
 pointer-events: none;  
}
.navbarfooter-mainlink {
 white-space: nowrap;
}
.navbarfooter-mainlink {
 font-size: 17px;
 display: inline-block;
 white-space: nowrap;
 padding: 5px;
}

@media only screen and (max-width: 740px) {
 .navbarfooter {
  flex-wrap: wrap;
 }
}