Html 在较小的屏幕上垂直堆叠3个div和4个图像

我正在建立一个网站，我正处于时间紧迫的时期，努力让下面的布局在使用媒体查询的小屏幕设备上垂直对齐

对于较小屏幕，按此顺序所需的垂直布局：

介绍

图1

副手

图3

总结

图4

图2不在较小屏幕上显示

.container{
边界宽度：厚；
边框样式：凹槽；
边界半径：5px；
宽度：100%；
}
.intro{宽度：910px；文本对齐：对齐；填充：10px；页边距底部：10px；}
.sidedoc{width:390px；文本对齐：对齐；float:right；margin right:10px；margin top:-450px；}
.结束{宽度：920px；填充：10px；文本对齐：对齐；页边距顶部：20px；}
.readysetgo{
浮动：对；
边界半径：7px；
右边距：28px；
边缘顶部：-148px；
-webkit动画：mymove 10s infinite；/*Chrome、Safari、Opera*/
动画：mymove 10s无限；
}
/*铬、狩猎、歌剧*/
@-webkit关键帧mymove{
50%{盒影：10px 20px 30px绿色；}
}
/*标准语法*/
@关键帧mymove{
50%{盒影：10px 20px 30px绿色；}
}
.回收{最大宽度：100%；左边距：120px；}
.圆角{最大宽度：50%；边框半径：10px；浮动：右；右边距：17px；边距顶部：-375px；}
.thinkgreen{最大宽度：100%；左边距：自动；右边距：自动；显示：块；边距底部：25px；边距顶部：20px；}

内容1
内容2
内容3

有几种方法可以实现这一点，一种方法是在css中使用

@media

下面是一个使用

@媒体的示例

HTML

再次感谢
这是您的基本布局

HTML

展开窗口参见下图
到目前为止，你的代码是什么？约翰，我的代码很长，但到目前为止，他们已经产生了所附照片中所示的结果。请看，在此处输入图像描述。这不是它的工作方式。无论如何：。通过一些工作，你可以对它们进行调整和改进，但下次发布MCVE或任何东西时…@green抱歉，正如我所说，我对编码和网站都是新手。我已经包括了我的代码片段。我希望这能帮助亚当，你的小提琴已经垂直对齐了。我的布局必须与照片中所示完全一致，然后随着设备屏幕变小而垂直对齐。@cyberhood使窗口变大，而不是垂直对齐algined@cyberhood看附件中的图片，我现在看到了。对不起！我要试一试！我没有取得这些成果。我编辑了我的信息并在上面插入了我的实际代码，你能看一下吗？我不明白你给出的答案：（很抱歉，我对编码是新手。我当前的布局如图所示，…我想在设备上实现垂直布局，因为屏幕越来越小…但是按照这个垂直顺序：（1）简介（2）图像1（3）sidedoc（4）图片3（5）总结（6）图片4图片2不显示在较小的屏幕上不太确定我是如何投票的，它确实回答了问题。无论如何…@cyberhood如果你点击链接，你会看到一个例子，你所要做的就是把你的内容放在“第一内容”的左边区域等等。这将是屏幕缩小时的堆叠顺序。我在上面编辑了我的消息并插入了我的实际代码。你的不包括image@cyberhood是的，你的代码对你正在尝试做的事情没有意义，我向你展示的是你应该如何做是的，但是我如何让图像也这样做呢？
<div id="pagewrap">

    <header>
        <h1>3 Column Responsive Layout</h1>
    </header>

    <section id="content">
        <h2>1st Content Area</h2>
        <p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
    </section>

    <section id="middle">
        <h2>2nd Content Area</h2>
        <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </section>

    <aside id="sidebar">
        <h2>3rd Content Area</h2>
        <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    </aside>

    <footer>
        <h4>Footer</h4>
        <p>Footer text</p>
    </footer>

</div>

/* STRUCTURE */

#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
header {
    height: 100px;
    padding: 0 15px;
}
#content {
    width: 290px;
    float: left;
    padding: 5px 15px;
}

#middle {
    width: 294px; /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}

#sidebar {
    width: 270px;
    padding: 5px 15px;
    float: left;
}
footer {
    clear: both;
    padding: 0 15px;
}

/***********************MEDIA QUERIES***********/
/* for 980px or less */
@media screen and (max-width: 980px) {

    #pagewrap {
        width: 94%;
    }
    #content {
        width: 41%;
        padding: 1% 4%;
    }
    #middle {
        width: 41%;
        padding: 1% 4%;
        margin: 0px 0px 5px 5px;
        float: right;
    }

    #sidebar {
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }

    header, footer {
        padding: 1% 4%;
    }
}

/* for 700px or less */
@media screen and (max-width: 600px) {

    #content {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }

    #sidebar {
        width: auto;
        float: none;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

    header {
        height: auto;
    }
    h1 {
        font-size: 2em;
    }
    #sidebar {
        display: none;
    }

}

#content {
    background: #f8f8f8;
}
#sidebar {
    background: #f0efef;
}
header, #content, #middle, #sidebar {
    margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
    border: solid 1px #ccc;
}

<div class="intro">
  intro
</div>
<img class="image1" src="http://lorempixel.com/400/200/">
<img class="image2" src="http://lorempixel.com/400/200/">
<div class="sidedoc">
  Side Doc
</div>
<img class="image3" src="http://lorempixel.com/400/200/">
<div class="conclude">
  conclude
</div>
<img class="image4" src="http://lorempixel.com/400/200/">

body {
  margin: 0;
}

div,
img {
  width: calc(50% - 6px);
  height: 200px;
  border-style: solid;
  float: left;
}

.image3 {
  float: right
}

.image4 {
  margin: auto;
  display: block;
  float: none;
}

img {
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 50%;
  //width: 400px;
  //height: 100px;
}

@media(max-width: 800px) {
  div,
  img {
    width: 100%;
  }
  .image2 {
    display: none;
  }
}