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

Question

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

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

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

我的代码如下，任何指导都会很有值(value)。

.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>