Как сделать левое / правое изображение / текстовый макет отзывчивым как макет выше / ниже?

Question

У меня есть блок функций / преимуществ на моем сайте, который при ширине настольного типа настроен на этом изображении слева / текст справа;текст слева / изображение справа тип структуры.

изображение слова

слова изображение

изображение слова

Вы можете видеть это здесь - http://jsfiddle.net/thjz3qp9/

Однако, когда размеры экрана уменьшаются до пейзажа смартфона и ниже, я хочу, чтобы этот раздел свернулся до изображения над макетом слов.

image

words

image

words

Структура html усложняет:

<div class="benefits-block">
    <div class="left>
        <img src="">
    </div>
    <div class="right">
        <p> ... </p>
    </div>
</div>
<div class="benefits-block">
    <div class="left>
        <p> ... </p>
    </div>
    <div class="right">
        <img src="">
    </div>
</div>

- создание сценария:

image

слов

слов

изображения

- в меньших разрешениях.Это можно увидеть на той же скрипке в http://jsfiddle.net/thjz3qp9/, если вы нажмете «Настройки»> «Нижние результаты» и измените размер вашего браузера до этой точки останова (или если вы просматриваете телефон).

Как можно использовать этот тип структуры влево / вправо при больших разрешениях, но при этом уменьшать его до изображения над текстовой структурой при меньших разрешениях, когда html по существу равен <img> <p> <p> <img>?

Answer 1

Поскольку логически порядок должен быть сначала изображением, а затем словами (как в мобильном дизайне), вот как вы хотите, чтобы оно было в вашем HTML.Затем используйте CSS, чтобы расположить блоки так, как вы хотите.

Вместо того, чтобы нацеливать контейнерный div (.benefits-left), попробуйте нацелить изображение внутри него: .benefits-left img.Таким образом, вы можете указать, чтобы он перемещался влево или вправо в зависимости от класса контейнера, не переставляя HTML.