如何在不使用 bootstrap 的情况下安排 div 使其更适合移动设备？

Question

我正在努力学习 css 和 flex-box/grid。我想重新排列 div，以便在调整屏幕大小时改变 div 的位置。我试过绝对位置、相对位置和弹性位置，但无法使其按预期工作。这个想法是得到类似 this.

的东西

这是我目前编写的代码的代码笔：

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

Answer 1

这里我添加了 flexbox 布局，没有按照示例图片使用 bootstrap。您还可以根据需要调整正文 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>

如何在不使用 bootstrap 的情况下安排 div 使其更适合移动设备？

How to arrange divs to be more mobile friendly without using bootstrap?

css

media

responsive