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

少し前に、「Flex boxのレシポンシブのbox内のテキストの動きについて」質問したのですがブレークポイントmax-width:767pxの時の.hed-3のテキストの動きが逆になってしまい改善できません。どなたか教えてください。※画面がPCの時は、hed-3の文字位置は右寄りスマホ時は左寄りにしたいのですが？

<!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; justify-content: center; } .hed-3 { flex-basis: 35%; justify-content: flex-end; }

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

.inner > div{
width: 100%;
}

.hed-3 {
display:flex;
justify-content: flex-start;
}
}
-->
</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>

s8_chu

2019/06/20 16:55

「テキストの動きが逆になる」とは、具体的にどのような挙動を指しているのか、もう少し詳しく教えていただけませんか？

kurobuta

2019/06/20 23:19

連絡ありがとうございます。bodyの中の<div class="hed-3" style="background-color : lime;">0120-000-000　時間：平日9：00～17：00　<a href="">お問い合わせ</a><br> test<br> test</div>の中のテキストが現状では、PCのブラウザの幅を広げれば左寄り、画面を縮めていけば右寄りになってしまいます。希望はその逆で広げれば右寄り、縮めれば左寄りにしたいです、？ブレークポイントはmax-width:767pxにしたかったのですが？max-width:767pxはその他の関係上書き換えはせずにこのままで行いたいです。よろしくお願いいたします。

x_x

2019/06/21 01:31

text-alignではだめな理由、そして前回の質問で解決した時点から何が変わったのかを書いてもらえるでしょうか？

kurobuta

2019/06/21 04:52

何度もスミマセン、また私の説明確認不足していて申し訳ありませんでした。頂いたのアドバイス通り左寄りになったのですがよく見るとbodyのdiv class="hed-3"のtest2つが左寄りになっていませんでした。私の確認不足でした。やりたかったことは画面を縮小した時、div class="hed-3"のすべてのテキストが左寄りになってほしいです。text-align : left;ではできませんでした。何せHP作成の初心者なものですので手探りで行っているのが現状です。よろしくお願いいたします。