Flex boxのレシポンシブのbox内のテキストの動きについて

作成したFlex boxのCSS.hed-3の文字の位置が通常時(PC表示)の場合は右寄せにしてブレークポイントmax-width:767pxの時は左寄せにしたいのですが上手くでき出来ません。教えて頂ければ助かります。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> <!-- .inner{ display: -webkit-flex; display: flex; padding:0; width:100%; } .hed-1 { flex-basis: 35%; } .hed-2 { flex-basis: 30%; display:flex; -webkit-align-items: center; -webkit-justify-content: center; align-items: center; /*上下中央*/ justify-content: center; /*左右中央*/ }

.hed-3 {
flex-basis: 35%;
align-items: center; /上下中央/
text-align : right;
}

@media screen and (max-width:767px) {
.inner{
display: block;
}
.inner > div{
width: 100%;

.hed-3 {
display:flex;
text-align : left;
}

}
-->
</style>

</head> <body> <div> <div class="inner"> <div class="hed-1" style="background-color : yellow;">logo</div> <div class="hed-2" style="background-color : silver;">ｔｅｓｔ</div> <div class="hed-3" style="background-color : lime;">0120-000-000　時間：平日9：00～17：00　<a href="">お問い合わせ</a><br> test<br> test</div> </div> <div>お知らせ・新着情報</div> </div> </body> </html>