画像配置にあたり、md以上の場合はHStackで横並び、それ以外の場合は縦並びにしたい

前提

Next.jsでWEBサイトを作成しており、CSSはChakra UIで書いています。
https://chakra-ui.com/

下記のように、5の画像が横に並ぶ部分があります。

実現したいこと

スマホで見ると、5つの画像が小さくなり、見えなくなってしまいます。
レスポンシブデザインを適用したいです。
md以上はHStackで横並びで良いのですが、それ以外はHStackを適用せず、縦並びにしたいです。

該当のソースコード

typescript
1<HStack mt="6">
2  <Box width={400}>
3     <Image src="/images/test1.png" width={400} height={300} objectFit="contain" alt="test1" />
4  </Box>
5  <Box width={400}>
6    <Image src="/images/test2.png" width={400} height={300} objectFit="contain" alt="test2" />
7  </Box>
8  <Box width={400}>
9     <Image src="/images/test3.png" width={400} height={300} objectFit="contain" alt="test3" />
10  </Box>
11  <Box width={400}>
12     <Image src="/images/test4.png" width={400} height={300} objectFit="contain" alt="test4" />
13  </Box>
14  <Box width={400}>
15    <Image src="/images/test5.png" width={400} height={300} objectFit="contain" alt="test5" />
16  </Box>
17</HStack>