根据设备/屏幕尺寸水平/垂直堆叠div

Question

我遇到了这个问题，其中我的分歧如下：

从本质上讲，这只是一个大问题的一小部分，通过了解以下内容的工作方式，我正计划解决一个更大的问题。

从上图中可以看出，我有两个较小的分区，每个分区占较大分区的一半。但是，在平板电脑中，我希望它们并排放置。

这可以通过使用Bootstrap或其他框架轻松解决，但是我提出这个问题的动机是了解如何从头开始完成它的基础，更重要的是理解核心概念。

我尝试了一下，这是我的尝试JSFiddle

这是我想出的代码：

<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; 
  }
}

我不知道事情是否过于复杂。但我希望有人可以在这里为我澄清一下。

提出我的问题：如何在不使用任何框架的情况下如上图所述堆叠划分，并且在尝试中需要纠正哪些问题？

Answer 1

这是怎么回事：http : //jsfiddle.net/josephspens/pNVFw/

的HTML

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

的CSS

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;
  }
}