

パソコンとモバイルでWebレイアウトを分けたいです。  
display:flex;のorderプロパティやメディアクエリを試してみたのですが、どうしてもうまくいきません。  
HTML階層構造が異なるからだということに気が付きました。  
モバイルでアクセスしたときだけ、HTML階層構造を変更することはできますか？

* * *

PCからのアクセスを想定。前提となるhtml

[code]

    <div class="wrapper">
      <a href="a">
        <img src="1.jpg">
        <p><span></span></p>
      </a>
    
      <h2><svg></svg><a href=""></a></h2>
    
      <div>
        <a href=""><button></button></a>
      </div>
    
      <a href="a"> 
        <img src="2.jpg">
        <h3></h3>
        <p></p>
        <p></p>
      </a>
    
      <a href="b"></a>
      <a href="c"></a>
    </div>
    
[/code]

モバイル用アクセスとして変更したいこと。  
画像を横に並べたいです。  
上の画像を下の画像の所へ移動させ、横に表示させたいです。  
2つあるimgタグのリンク先は、同じです。

* * *

モバイルからのアクセスで表示させたいhtmlを追記しました。

[code]

       <div class="wrapper">
          <h2><svg></svg><a href=""></a></h2>
        
          <div>
            <a href=""><button></button></a>
          </div>
        
          <a href="a"> 
            <img src="1.jpg"><img src="2.jpg">
            <h3></h3>
            <p></p>
            <p></p>
          </a>
        
          <a href="b"></a>
          <a href="c"></a>
        </div>
    
[/code]


CC BY-SA 4.0
2021-06-24T12:05:18.180
77762
2021-06-27T12:17:18.397
2021-06-27T12:17:18.397
7886
7886
question
html css
モバイルでアクセスしたときは、HTML階層構造を変更したい