jquery - 在大屏幕上按行显示 flex 元素，但在小屏幕上垂直堆叠

Question

我正在为我的客户创建一个简单的主页。我正在使用 flex-box 来布局页面上的主要内容。我有 2 个 div.container，每个包含 2 个 img。

在桌面 View 中，我希望 2 个 div.container 以内嵌方式显示，但是当网站在移动 View 中时，我希望它们堆叠显示。

我还希望其余内容无论在什么 View 中都保持堆叠状态。

我该如何实现？

function setHeight() {
	$('.img-c').css('height', $('.img-c').innerWidth());
}

setInterval(setHeight, 10);

:root {
  background: #fff;
}

#logo {
  display: block;
  margin: auto;
  width: 200px;
  text-align: center;
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  background: #0a0;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Segoe UI', sans-serif;
}

li.selected {
  color: orange;
}

nav ul li:hover {
  color: springgreen;
  cursor: pointer;
}

nav ul li.selected:hover {
  color: #ff7700;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

main p {
  text-align: center;
  max-width: 80%;
  font-size: 1.5rem;
  font-family: 'Segoe UI';
}

main p:nth-of-type(3) {
  font-weight: bold;
}

main hr {
  width: 100%;
  background: #0a0;
  height: 1px;
}

.img-c {
  width: 20%;
  background-color: #000;
  max-width: 200px;
  min-width: 100px;
}

@media screen and (max-width: 416px) {
  #bottom {
    display: block;
    order: 1;
  }
  
  .img-c {
    width: 50%;
  }
}

@media screen and (max-width: 358px) {
  nav ul {
    flex-direction: column;
    padding: 0;
  }
  
  nav ul li {
    width: 100%;
    text-align: center;
  }
  
  nav ul li:nth-child(2n) {
    background: #0c0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"/>
  <nav>
  <ul>
    <li class="selected">Home</li>
    <li>About</li>
    <li>Classes</li>
    <li>Jobs</li>
  </ul>
  </nav>
</header>
<main>
  <div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c"/>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="background: magenta"/>
      </div>
       <div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c"/>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="background: magenta"/>
    </div>
  <p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
  <hr/>
  <p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
  <hr/>
  <p>Computer Immersion has the answer!</p>
  <hr/>
  <p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
  <hr/>
  <p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
  <hr/>
</main>

Answer 1

第 1 步:

• 将所有四个图像包装在一个 flex 容器中。

  <div id="container">
      <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c"/>
      <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="background: magenta"/>
      <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c"/>
      <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="background: magenta"/>
  </div>
  

---

第 2 步:

• 为更大的屏幕设置 flex 元素的样式。

  .container {
       display: flex;
       justify-content: space-around;
  }
  

---

第 3 步

• 为较小的屏幕设置 flex 元素的样式。

  @media screen and (max-width: 416px) {
     .container {
          flex-wrap: wrap;
      }
     .img-c {
          width: 50%;
          border: 2px solid white;
          box-sizing: border-box;
      }
  }
  

DEMO