前提

現在趣味で某ゲームのダメージ計算サイトを作成中です。
マルチメディアでの快適な使いやすさを考えながら作成をしているのですが、その途中で自分の能力では表現できない実装方法を考えています。

調べてみても検索能力が低さからか、解決に辿り着くことができなかったため、この場所を借りて質問させていただきます。

問題点

flexboxを用いて、以下の画像のような表示を行いたいです。

flexboxではorderプロパティが用意されているので、順序の指定を行い、メディアクエリを用いて一定の画面サイズ以下であればorderプロパティの値を入れ替える、といった処理が思いついたのですが、この場合flexboxを使って実装する利点（メディアクエリを使用してしまってるので楽な実装方法ではない）を潰してしまっている気がしているので、少し違和感を感じています。

何か他にも方法があれば、ご教授いただけますと幸いです。

追記

HTML文について追記依頼があったため、記載致します。

HTML
1<div class="wrapper">
2  <div class="a">
3    <!-- 内容 -->
4  </div>
5  
6  <div class="c">
7    <!-- 内容 -->
8  </div>
9
10  <div class="b">
11    <!-- 内容 -->
12  </div>
13</div>

クラス名は据え置きです。
最初はこのように実装していたのですが、PCとしては上記のHTMLの通りに横並びで表示。
スマホなどの小さい画面でみた場合は、cとbを入れ替えて縦に3つ表示したいです。

x_x

2019/05/09 05:24

一定のサイズ以上であればflexでいいような気がしますが、HTMLはどうなっているのでしょうか？

退会済みユーザー

2019/05/09 05:35

閲覧ありがとうございます。申し訳ありません、情報不足でした。 HTML文の追加を行ったので、確認いただけたらと思います。また、自分がHTML/CSSの初学者なこともあり、flexとfloatの使い分けや、本当にこれでいいのか、などの判断が難しく、今回質問させていただいてます。 flexでいいというのは、私が提示したorderで順序を入れ替えて、小さい画面の場合にメディアクエリを用いてorderを変更する、という認識でよろしいでしょうか？