※ ChatGPTを利用し、要約された質問です（原文：FlexboxのレシポンシブCSSで困ってます2）
FlexboxのレシポンシブCSSで困ってます
このQ&Aのポイント
Flexboxを使用したレシポンシブCSSで問題が発生しています。
infofl-item2のリストがh3の下ではなく右側に表示されてしまっています。
原因がわからず、どこが悪いのか教えていただきたいです。
Proof4さんスミマセン！再度質問させてください。教えて頂いた通りにしたらboxのレシポンシブ化は出来たので、infofl-item2にｈ3とリストを作成したらinfofl-item2のリストがｈ3の下に来なくて右横に来てしまいました。どこが悪いのかわかりません？お手数ですが教えて下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Introduction to CSS(flex-basis)</title>
<script src="js/flexibility.js"></script>
<style>
<!--
.infofl{
display: -webkit-flex;
display: flex;
padding:0;
width:100%;
}
.infofl-item1 {
display: -webkit-flex;
display: flex;
flex-basis: 40%;
}
.infofl-item2 {
display: -webkit-flex;
display: flex;
flex-basis: 60%;
}
@media screen and (max-width:567px) {
.infofl{
display: block;
}
.infofl > div{
width: 100%;
}
}
-->
</style>
</head>
<body>
<div class="infofl">
<div class="infofl-item1" style="background-color : yellow;">
<dl>
<dt>■test1
<dd>test
<dd>test
<dt>■test2
<dd>test
<dd>test
<dt>■test3
</dl>
</div>
<div class="infofl-item2" style="background-color : silver;">
<h3 style="color : white;background-color : #212121;padding-top : 0.5em;padding-left : 0.5em;width : 98%;height : 1.5em;">お知らせ・新着情報</h3>
<dl>
<dt>■test1
<dd>test
<dt>■test2
<dt>test
<dt>■test3
<dt>■test4
<dt>■test5
</dl>
</div>
</div>
</body>
</html>
何度お尋ねしてもうしわけありまんがよろしくお願いいたします。
お礼
ありがとうございました。上手くできました。