Html 响应式调整尺寸

我有一个div，其中包含以下布局（上图）：

我正在尝试解决如何将元素移动到resize/移动设备底部图像中显示的配置，但我无法解决

以下是JSFIDLE：

如果有人能给我指出正确的方向，那将是很好的，我是一个初学者，所以我的代码可能不是很好，所以任何指针都将是伟大的

谢谢

“指向jsFiddle.net的链接必须附带代码”-我不是针对某个特定元素，但这里是满足要求的html：

最新项目

 <h3 id="latestDescription">aboutaboutabout</h3>

<div id="latestSub">
     <h4 id="latestSubheading">Insert Project Name</h4>

    <p id="latestSubdescription">Out believe has request not how comfort evident.
        <br>Extremity sweetness difficult behaviour he of.
        <br>With my them if up many.</p>
</div>
<div id="latestIcons">
    <div id="latestOne">
        <img id="latestIcon1" src="http://placehold.it/80" alt ""/>
         <h5 class="latestH5">Design</h5>

        <p class="latestP">Instantly gentleman contained belonging exquisite now direction she ham.</p>
    </div>
    <div id="latestTwo">
        <img id="latestIcon2" src="http://placehold.it/80" alt ""/>tH5">Accuracy & Details</h5>
        <p class="latestP">Its hence ten smile age means. Seven chief sight far point any.</p>
    </div>
    <div id="latestThree">
        <img id="latestIcon3" src="http://placehold.it/80" alt ""/>
         <h5 class="latestH5">Posibilities</h5>

        <p class="latestP">Children me laughing we prospect answered followed.</p>
    </div>
</div>
<div id="latestPhotoDiv">
    <img id="latestphoto" src="http://placehold.it/350" alt />
</div>

aboutabout关于
插入项目名称
我们不相信有多么明显的舒适性要求。

他表现出极端的甜蜜和困难。

和我的朋友在一起，如果有很多的话
设计
立刻，绅士包含了她现在的方向
tH5“>准确性和细节
因此它的十笑年龄意味着。七个主要的视力远点任何
可能性
孩子们让我大笑，我们也跟着笑

---

有几种可能的方法。您可以根据需要进行选择

您可以使用媒体查询为不同的屏幕定义不同的样式表。这是目前最常用的方式。
偷窥： 和

您可以使用视口元标记。
偷看：

你可以用%（流体响应）来设计任何东西，但这一部分非常棘手。根据我的经验，我可以说设计一个完整的 网站提供的一切在%是非常困难的

---

我建议你学习媒体查询。它非常简单可靠。

你必须看一看

媒体查询为您提供了一种方法，可以将某些CSS属性仅针对特定的媒体属性（当然包括视口大小，但也包括打印、黑白等）

许多人会建议您从移动优先方法开始，也就是说，您首先为移动、最低版本应用CSS，然后在视口变宽时在断点处应用媒体查询，将CSS如下所示：

@media (min-width: 480px){
   /* CSS goes here */
}

---

谢谢，我会查看的。媒体查询是针对设备的（例如，手机使用不同的样式表）还是针对大小的？（例如，当窗口在计算机上调整到一定大小时，将使用不同的样式表）。它适用于大小：）您可以定义最小宽度最大宽度，然后为that@user3403768如果我的答案能够解决您的问题，请检查/投票谢谢，我已经尝试过了，但我还没有15个声誉，所以它不会让我这么做。@user3403768好的。您可以检查一下，但请注意标记不是关键字。在标记列表中填充满了s问题中的ame单词（响应、调整大小、元素）无助于对其进行分类。请务必阅读选择标记时出现的说明！