Как мне перемещаться вправо, только когда экран меньше, и плавать влево, когда экран больше?

Question

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

В настоящее время у меня есть первое, но когда размер экрана уменьшается, img идет вверху, а текст внизу. Как мне изменить это?

Вот мой код (есть div для img и один для текста описания):

<div class="container productwrap shadow-lg mt-3">
    <div class="row">
        <div class="col-md-4 p-2 m-3 border">
            <img src="../Pictures/snacks3.jpeg" alt="snacks2">
        </div>
        <div class="col-md-7 p-2 my-3 border rounded">
            <p class="newarrival text-center pt-3 font-weight-bold">Trendy Snacks</p>
            <h2 style="display: inline-block" class="p-3 ml-2 border rounded">Brown Sugar Yogourt</h2>
            <span class="badge badge-success align-top m-1">NEW!</span>
            <p class="lead font-weight-bold text-warning m-4">CAD $9,99</p>
            <p class="m-4"><strong>Unit: </strong>2 x 100g</p>
            <p class="m-4"><strong>Availability: </strong>In Stock</p>
            <label for="qty" class="ml-4"><strong>Quantity:</strong>
                <input type="text" id="qty" name="qty" class="small w-25 text-right" value="1">
                <button class="btn btn-outline-success btn-sm" href="#" role="submit">Add to Cart</button>
            </label>
            <p>
                <button class="btn btn-info btn-sm m-2 mr-3 rounded-pill" data-toggle="collapse" data-target="#moreinfo">More info</button>
                <div id="moreinfo" class="collapse text-wrap">
                This delicacy instills the careful mix of brown sugar and yogourt. Its rich nutriments will revitalize your spirit and set you ready for your day.
                </div>
            </p>
        </div>
    </div>
</div>

Я пробовал использовать float-right / left, но он совсем не двигается с места.

Answer 1

Я хочу получить эффект, когда изображение находится справа от текста, но когда экран меньше, текст находится вверху, а img внизу. В настоящее время у меня есть первое ...

Я не вижу, чтобы у вас был первый. На больших экранах изображение находится в левой части текста ...

Если вы измените порядок структуры изображения и структуры текста, вы получите оба:

<div class="container">
    <div class="row">
        <div class="col-md-7">
            ...
        </div>
        <div class="col-md-4">
            <img />
        </div>
    </div>
</div>

demo: https://jsfiddle.net/davidliang2008/5m2z4s90/4/

Обновления:

Вы можете использовать класс утилит заказа для достижения желаемого:

<div class="container">
    <div class="row">
        <div class="col-md-4 order-2 order-md-1">
            <img />
        </div>
        <div class="col-md-7 order-1 order-md-2">
            ...
        </div>
    </div>
</div>

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

демонстрация: https://jsfiddle.net/davidliang2008/5m2z4s90/9/

Answer 2

Распространенным более сложным приемом адаптивного дизайна является использование «Медиа-запросов» в CSS.

Для начала выровняйте элементы, как вам нравится, по умолчанию. Затем выберите предел для изменения размера (например, «ширина менее 600 пикселей»). После того, как у вас есть этот набор, вы можете начать медиа-запрос следующим образом:

@media (max-width: 600px) {
  *selector* {
    *change you want to make when screen is smaller than 600px*;
  }
}

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

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

Answer 3

Используйте CSS Grid и выровняйте так, как вы хотите выровнять по умолчанию. Затем используйте медиа-запрос, и когда представление станет меньше, просто измените размер div и порядок макета сетки.