Html 调整屏幕大小时如何在图像下移动信息？仅使用css

我想显示一个图像，当全屏显示信息的权利，但当你调整屏幕较小的信息移动到下面的图像。我该怎么做

<div class="container">

<h1>LandScape</h1>
    <div class="content">
        <div id="item">
        <img src="#">
        <h3>Ferrari LaFerrari<span>car info</span></h3>
        <ul class="info">
            <li><h4><i class="icon icon camera">Canon Powershot S95</h4></li>
            <li>22.5 MM</li>
            <li>f/5.6</li>
            <li>1/1000</li>
            <li>80</li>
        </ul>
        </div>
    </div>


</div>

景观
法拉利法拉利汽车信息

佳能Powershot S95
22.5毫米
f/5.6
千分之一
八十

没有更具体的数据，我只能给你一个大概的要点
(一)

->一行中的图像和信息
(二)
媒体询问如下：

@media screen and (max-width: 300px){
...
}

请看这里：
欢迎来到StackOverflow！请张贴你已经使用的CSS。更好的是，制作一个JSfilddle或类似的代码，向我们展示您的尝试。
@media screen and (max-width: 300px){
...
}