CSS - 2 列，一列固定宽度，一列响应式

Question

这里有很多关于这个主题的例子，但我所追求的是我似乎找不到答案的东西。

我想创建一个两栏页面：左栏用于导航（固定宽度），右栏用于内容（响应式）。我所追求的变化是，我希望导航显示在桌面上的左侧和移动设备上的内容下方。

我的代码可以“工作”，但问题在于右列的响应宽度。

我的代码如下，任何指导都会非常有价值。

.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
.CF { display:block; }

.content {max-width: 1300px; margin: 0 auto; padding: 0 25px; display:block; }
	.information {display:block; background: lime;}
	.menu {display:block;  background: lightblue;}
	
@media all and (min-width: 992px) {
.content {padding: 0 50px; }
	.information {display:block; float: right; width: auto;  }
	.menu {width: 250px; float:right; }

}

<div class="content CF">

<article class="information">
    Article Information
</article>

<nav class="menu">
    Menu
</nav>

</div>

Answer 1

我会用来flexbox解决这个问题。

当屏幕宽度大于 991 像素时，下方菜单位于左侧。否则就在文章下面。

我只为可见性指定了颜色。

.content {
  display: flex;
  background: blue;
}

.menu {
  width: 100px;
  background: red;
}

.information {
  background: green;
  flex-grow: 1;
}

@media all and (max-width: 991px) {
  .content {
    flex-wrap: wrap;
  }
  .menu {
    order: 2;
  }
  .information {
    order: 1;
    min-width: 100%;
  }
}

<div class="content">
  <nav class="menu">
    Menu
  </nav>
  <article class="information">
    Article Information
  </article>
</div>