在小尺寸的移动设备上，英雄区的最上面是一个图像，下面是英雄上的文字内容 ..

回到项目 ...

找到 index.html 里面的英雄区这块代码 .. 这里内容代码是在图像代码的上面。我们不需要改变代码的结构，可以使用 css 的 flexbox .. 这里应该就是把 item 这个容器设置成一个 flexbox

然后再去设置 content 还有 image 的顺序属性，这样我们就可以让下面的 image 里的内容在 content 里面包装的内容的上面显示出来 ..

回到 hero 样式 ..

先添加一个媒体查询 .. @media only screen and (max-width: 767px)

意思就是在小于等于 767px 的 screen 类型的设备上 .. 去添加点样式 ..

用一个 .item ，里面使用 display，把它设置成 flex .. 这样英雄区里的 item 元素就会是一个 flexbox ..

再把 flex-direction 的值设置成 column ..

然后再去设置一下 image .. 先把它的 position 属性的值设置成 inherit ，因为之前我们把它设置成 absolute 了，在小尺寸的移动设备上，我不希望再让它使用绝对定位了，所以在这里可以重新设置一下 position 的值 ..

再给它添加一个 order 属性，它的值可以是 1 ..

下面再去设置一下 content 元素 .. 在它里面用一下 order，它的值可以设置成 2 ..

这样图像就会在内容的上面出现了 ..

让这个文字可以居中 .. 在 item 上面，用一下 align-items .. 设置成 center ，再用一个 text-align 文字的对齐方式，也设置成 center ..

我想让这这个大标题小一点，用一下 .header ，重新设置一下它的 font-size ，值可以是 36px ..

现在我们的英雄区的设计就做好了 ...