
[code]

    <div class="image"></div>
    <div class="sentence"></div>
    
[/code]

上記でPC向けにサイトを作った後、スマホ用にレスポンシブ対応することになったのですが  
.imageを.sentenceの下に潜り込ませるにはどうすればいいでしょうか


CC BY-SA 3.0
2016-06-07T07:22:47.630
26532
2016-07-12T14:01:54.173
12483
question
css
cssでの並び替え


単純に、表示するレイアウトの話でしょうか。

全体がみえないのでなんとも言えませんが  
CSSで解決するのは難しい、または推奨出来ないかなと思います。  
シンプルに要素を入れ替えてしまいたいのであれば  
jQueryなりで操作をするのが良いと思います。

CSSで解決するには、下記のような記述が必要になります。  
動的に高さが変動する場合は難しいですし  
何よりも、おすすめできる書き方ではありません。  
jQueryのコードもコメントアウトし記述しておきましたので  
こちらで解決するのが望ましいかと思います。  
他の要素も有る場合は`insertAfter`等も活用してみてください。

[code]

    //$('.image').appendTo('.container');
[/code]

[code]

    .image{
      width:100px;
      height:100px;
      margin:10px;
      background:red;
      
      /* 以下位置調整 */
      position:relative;
      top: 110px;
      }
    
    .sentence{
      width:100px;
      height:100px;
      margin:10px;
      background:blue;
      
      /* 以下位置調整 */
      position:relative;
      top: -110px;
      }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="container">
        <div class="image">上の要素</div>
        <div class="sentence">下の要素</div>
    </div>
[/code]


CC BY-SA 3.0
2016-06-07T10:04:13.913
26539
2016-06-07T10:04:13.913
16764
26532
answer


論理構造が逆になることが許容範囲であれば、以下で可能です。

このソースの肝は、

  * PC用ではおそらく画像の縦横が固定なところを利用する
  * HTMLの記述をスマホ用にする
  * CSSをPC用に記述（Media Queryなどを用いる）

[code]

    .wrapper {
      position: relative;
    }
    
    .images {
      position: absolute;
      top: 0;
    }
    
    .sentence {
      padding-top: 150px; /* 画像の高さ */
    }
[/code]

[code]

    <div class="wrapper">
      <div class="sentence">Lorem ipsum</div>
      <div class="images"><img src="https://placehold.jp/150x150.png" alt=""></div>
    </div>
[/code]


CC BY-SA 3.0
2016-07-12T13:49:42.250
27571
2016-07-12T13:49:42.250
17145
26532
answer


もう一つの解。  
画像の縦横比が決まっているのであれば、以下。

[code]

    .wrapper {
      position: relative;
      padding-bottom: 75%; /* 画像の比率 縦/横 */
    }
    
    img {
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0;
    }
[/code]

[code]

    <div class="wrapper">
      <div class="images"><img src="https://placehold.jp/400x300.png" alt=""></div>
      <div class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi error quae autem, quod ad eveniet hic tempora tenetur nemo animi natus magnam maxime in rerum, modi, rem assumenda ea exercitationem?</div>
    </div>
[/code]


CC BY-SA 3.0
2016-07-12T14:01:54.173
27572
2016-07-12T14:01:54.173
17145
26532
answer