不使用Bootstrap实现移动端sidebar、map可滚动交互div上下堆叠

问题根源 #

你代码的核心问题有3个：

1. .sidebar和.map都设置了position: absolute，完全脱离了文档流，父级.map_wrapper的flex布局根本无法控制这两个子元素的排列，所以你修改flex-direction不会生效
2. 媒体查询代码写在了.sidebar、.map的公共样式前面，CSS优先级更低，媒体查询里的样式会被后面的公共样式覆盖
3. .map_wrapper的行内样式加了width:70% !important，移动端无法通过普通类选择器修改宽度

修复方案 #

第一步：替换CSS对应代码

保留你原有h1、a、.heading、列表样式、地图弹窗、搜索框等无关样式，仅替换布局相关的代码即可：

body {
  color: #404040;
  font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
  height:100%;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

.map_wrapper{
  display: flex;
  width: 70%;
  margin: 0 auto;
  border: 1px solid red;
  height: 80vh; /* 适配你原来top:20%的效果，和顶部搜索框错开，可自行调整 */
}

.sidebar {
  width: 15%;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}
/* 保证列表可滚动 */
.listings {
  flex: 1;
  overflow: auto;
  padding-bottom: 60px;
}

.map {
  width: 85%; /* 补全剩余宽度，你原来的布局有间隙可自行调整比例 */
}

/* 原有其他通用样式放在这里，不用修改 */

/* 媒体查询放在最后，优先级更高 */
@media (max-width: 767px) {
  .map_wrapper {
    flex-direction: column-reverse;
    width: 100% !important; /* 覆盖原有行内important样式 */
    height: 100vh;
  }
  .sidebar,
  .map {
    width: 100%;
    height: 50vh; /* 各自占一半视口高度，可自行调整数值 */
    position: static;
    left: unset;
    top: unset;
  }
  .sidebar {
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
  }
}

第二步：清理元素行内样式

删除.map_wrapper上的行内样式避免冲突：

<!-- 修改前 -->
<div class="map_wrapper" style="border: 1px solid red;width:70% !important; display: flex; margin: 0 auto !important;">
<!-- 修改后 -->
<div class="map_wrapper">

效果说明 #

• 桌面端完全保留你原有左右排列的展示效果，宽度间隙可自行调整.sidebar和.map的宽度占比
• 移动端自动上下堆叠，默认map在上sidebar在下（如果要sidebar在上把flex-direction: column-reverse改成flex-direction: column即可），两个元素全宽展示，sidebar列表可正常滚动

内容的提问来源于stack exchange，提问作者Geoff_S