jquery - 在较大的屏幕上连续显示 flex 元素，但在较小的屏幕上垂直堆叠

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

在桌面视图中，我希望2个div.container内联显示，但是当网站处于移动视图时，我希望它们以堆叠形式显示。

我还希望其余内容无论处于什么视图中都保持堆叠状态。

我该如何完成？

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>

最佳答案

步骤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步：


为更大的屏幕设置弹性项目的样式。

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

步骤3


为较小的屏幕设置弹性项目的样式。

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

DEMO