0
フレックスボックスを使用してレスポンシブウェブデザインを行い、表示サイズに応じてdivボックスの順序を変更しています。CSS Flexbox注文
PC-Viewの場合、私は2つのタイプのデザインを使用しています。左側の画像（左側の浮き、右側の浮き）、右側の浮き出し（右側の浮き）
Mobile-Viewの場合、「注文」を使用してフレックスボックスのデザイン（トップのタイトル、写真の次のテキスト）に変更します。これは、問題なく右側の画像に有効です。左側の画像に同じコードを使用すると、それを変更する機会がなくなり、画像が下部に表示されます。
なぜ誰かが考えているのですか？ display: flex;を使用した場合
@media only screen and (max-width: 900px) {
div.wrap_content_pic_left, div.wrap_content_pic_right {
\t width: 97%;
\t \t \t \t
\t \t display: -webkit-flex;
\t \t display: flex;
\t \t -webkit-flex-direction: column;
\t \t flex-direction: column;
\t \t -webkit-align-items: center;
\t \t align-items: center;
\t \t -webkit-justify-content: center;
\t \t justify-content: center
\t \t \t \t
\t } \t \t \t
\t div.wrap_content_pic_right h1, wrap_content_pic_left h1, {
\t \t -webkit-order: 1;
\t \t order: 1;
\t }
\t div.wrap_content_pic_right h3, wrap_content_pic_left h3, {
\t \t -webkit-order: 3;
\t \t order: 3;
\t }
\t div.wrap_content_pic_left div#pic, div.wrap_content_pic_right div#pic {
\t \t float: none;
\t \t \t
\t \t -webkit-order: 2;
\t \t order: 2;
\t
\t \t width: auto;
\t \t text-align: center;
\t \t \t
\t }
}
div.wrap_content_pic_right, div.wrap_content_pic_left {
\t \t /*Position*/
\t \t position: relative;
\t \t padding: 1%;
\t \t margin-bottom: 1%;
\t \t clear: both;
\t }
\t div.wrap_content_pic_right div#pic {
\t \t /*Size*/
\t \t width: 30%;
\t \t \t \t \t \t
\t \t /*Position*/
\t \t float: right;
\t \t clear: right;
\t \t \t \t \t \t
\t }
\t \t
\t \t
\t div.wrap_content_pic_left div#pic {
\t \t /*Size*/
\t \t width: 30%;
\t \t /*Position*/
\t \t float: left;
\t \t clear: left;
\t }<div class = "wrap_content_pic_left">
<div id="pic">
<a href = "URL"><img src="PIC"/></a>
<h3><a href = "URL">Text</a></h3>
</div>
<h1>Title</h1>
<h3>Text</h3>
<div id="mobile" ><h3><a href = "URL">Text</a></h3></div>
<div style="clear: both"></div>
</div>
\t
フレックスコンテナでは浮動小数点は無視されることに注意してください。 http://stackoverflow.com/q/39194630/3597276 –