我努力学习CSS和Flex-盒/格。我想重新安排这样的div的div的位置调整后的画面时改变。我试过位置绝对的，相对的，柔性的，但不能让它像预期的那样。这个想法是得到这样的事情this。
这里是我到目前为止已经代码的codepen：
<!DOCTYPE html>
<html>
<head>
<title>Data</title>
<meta charset="utf-8"/>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<nav class="outer-col-1">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</nav>
<div class="outer-col-2">
<header><h1>TITLE</h1></header>
<div class="inner-row">
<div class="inner-col">
<article>
<h2>ARTICLE TITLE</h2>
<picture>
<source srcset="images/binare-270.png" media="(max-width: 440px)">
<source srcset="images/binare-400.png">
<img src="images/binare-400.png" alt="image desc">
</picture>
<p>LOREM IMPSUM</p>
<p>LOREM IMPSUM</p>
<p>LOREM IMPSUM</p>
</article>
<footer>FOOTERFOOTERFOOTER</footer>
</div>
<aside>
<p>LOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM IMPSUMLOREM </p>
</aside>
</div>
</div>
</body>
</html>在这里，我不使用自举作为每个样品图像添加的Flexbox的布局。 ，你也可以调整根据您的需要身体max-width。我希望这将适合你。
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
*,
:after,
:before {
box-sizing: border-box;
}
body {
padding: .5rem;
min-height: 100%;
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-flow: column;
}
a {
color: white;
}
nav,
aside {
flex: 0 0 10rem;
}
header,
nav,
aside,
main,
footer {
color: white;
background: #2b97f3;
padding: .5rem;
}
header,
nav,
footer,
aside,
main {
margin: 5px;
}
.wrapper {
display: flex;
flex-flow: row;
}
nav {
order: 1;
}
.wrapper-inner {
order: 2;
}
footer {
margin-top: 10px;
}
.main-inner {
display: flex;
}
@media screen and (max-width: 767px) {
nav {
margin-bottom: 10px;
}
.main-inner {
display: flex;
flex-flow: column;
}
.main-inner .content {
order: 2;
}
.main-inner .aside {
order: 1;
}
.wrapper {
display: block;
}
}<div class="wrapper">
<nav>
<h3>Navigation</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="wrapper-inner">
<header>
<h3>Header</h3>
</header>
<div class="main-inner">
<div class="content">
<main>
<h3>Content Area</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quod cumque at, qui excepturi illo vel, deserunt alias incidunt distinctio adipisci. Quisquam ducimus fuga ipsam modi accusamus, eaque unde porro.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo vitae hic provident incidunt, illum voluptatibus voluptates voluptate esse ea, vero, beatae necessitatibus maxime minus ex doloribus dolorem eum quisquam optio.</p>
<h4>More Content</h4>
<p>Lorem ipsum dolor sit amet, consecte reprehenderit, quod necessitatibus hic vel dicta pariatur illum! Omnis!</p>
</main>
<footer>
<h3>Footer</h3>
</footer>
</div>
<aside>
<h3>Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam necessitatibus velit voluptatem architecto eum magni quasi totam adipisci, suscipit, iure laboriosam deleniti modi sit excepturi accusamus minus debitis rem. Delectus.</p>
</aside>
</div>
</div>
</div>