Html 根据设备/屏幕大小水平/垂直堆叠div

我遇到了这样一个问题，我的划分如下：

这基本上是一个更大问题的一小部分，通过了解下面的工作原理，我计划解决一个更大的问题

如上图所示，我有两个较小的分区，每个分区占据较大分区高度的一半。然而，在平板电脑中，我希望它们能够并排出现

通过使用Bootstrap或其他框架可以很容易地解决这个问题，但我问这个问题的动机是理解如何从头开始，更重要的是理解核心概念

我试过了，这是我的尝试

下面是我想出的代码：

<div class="container">
<div class="largeImage">  
  <img src="http://lorempixel.com/745/292/sports/" alt="large">
</div>

<div class="smallImages">
  <img src="http://lorempixel.com/214/145/sports/" alt="large">
  <img src="http://lorempixel.com/214/145/sports/" alt="large">
</div>

.largeImage{
  max-width:740px;
  height:auto;
  width:100%;
  display:inline-block;
  clear:both;
}

.largeImage img{
  width:100%;
}

.smallImages{
  background-color:lightgray;
  display:inline-block;
  max-width:210px;
}
.smallImages img{
  width:100%;
  height:auto;
}
.container{
  background-color:whitesmoke ;
  max-width:960px;
  width:auto;
  margin:0 auto;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

  body{
    background-color:green;
  }
  
  .smallImages{
    width:100%;

  }
  
  .smallImages img{
    display:inline-block;
    float:left; 
    clear:both;
  }
  .largeImage{
   min-width:100% !important; 
  }
}
  

大图像{
最大宽度：740px；
高度：自动；
宽度：100%；
显示：内联块；
明确：两者皆有；
}
.LargeImg{
宽度：100%；
}
.smallImages{
背景颜色：浅灰色；
显示：内联块；
最大宽度：210px；
}
.smallImages img{
宽度：100%；
高度：自动；
}
.集装箱{
背景色：白烟；
最大宽度：960像素；
宽度：自动；
保证金：0自动；
}
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（方向：纵向）{
身体{
背景颜色：绿色；
}
.smallImages{
宽度：100%；
}
.smallImages img{
显示：内联块；
浮动：左；
明确：两者皆有；
}
大图像{
最小宽度：100%！重要；
}
}

我不知道我是否把事情复杂化了。但我希望有人能在这里为我澄清一下

请说明我的问题：

---

如何在不使用任何框架的情况下，按照上图所述堆叠分区，以及在尝试时需要更正的内容？

可以修改屏幕大小，但下面是一个基本示例，说明如何执行此操作：

---

屏幕大小可以修改，但下面是一个基本示例，说明如何进行此操作：

这是怎么回事

HTML

这是怎么回事

HTML

---

css的媒体查询，以便您可以根据屏幕大小定位元素css的媒体查询，以便您可以根据屏幕大小定位元素这正是我希望它的工作方式。您使用

em

而不是像素的具体原因是什么？Ems更适合缩放，通过对字体大小的简单更改，您可以缩放整个页面或整个小部件，而不仅仅是文本大小。大多数时候，你不是在用一位数的像素工作，比如填充和边距，你是在用更大的单位工作，所以为什么不让自己更容易些，比如说1em vs 16px或者其他什么。使做数学变得容易。感谢您的详细说明。这正是我想要它的工作方式。您使用

em

而不是像素的具体原因是什么？Ems更适合缩放，只需简单地更改字体大小，您就可以缩放整个页面或整个小部件，而不仅仅是文本大小。大多数时候，你不是在用一位数的像素工作，比如填充和边距，你是在用更大的单位工作，所以为什么不让自己更容易些，比如说1em vs 16px或者其他什么。使做数学变得容易。谢谢你的详细说明。

@media only screen and (max-width: 768px) {
  .smallImages{
      max-width:100%;
  }
   .smallImages img{
      max-width: 210px;
   }
}

<div class="container">
    <img src="http://lorempixel.com/745/365/sports/" alt="large"/>
    <img src="http://lorempixel.com/214/145/sports/" alt="large"/>
    <img src="http://lorempixel.com/214/145/sports/" alt="large"/>
</div>

img {
  width: 100%;
  float: left;
  display: block;
  margin-bottom: 1em;
}

@media screen and (min-width: 20em) and (max-width: 30em) {
  img {
      width: calc(50% - 0.5em);
  }
  img:first-child {
      width: 100%;
  }
  img:nth-of-type(2n+2) {
      margin-right: 1em;
  }
}

@media screen and (min-width: 30em) {
  img {
      width: 25%;
  }
  img:first-of-type {
      width: calc(75% - 1em);
      margin-right: 1em;
  }
}