Поменять направление блоков (из горизонтального в вертикальное)

Question

У меня есть сверстанный блок:

<footer class="footer">
        <div class="map" id="map">
            <script type="text/javascript" charset="utf-8" async
                src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A3b4851cc277917ecc11ea75bdc2a16e0839eb4494aa852c8b2162a19f79a0518&amp;width=100%25&amp;height=640&amp;lang=ru_RU&amp;scroll=false">
            </script>
        </div>
        <!-- /.map -->
        <div class="container">
            <div class="contacts-block">
                <div class="contacts">
                    <h3 class="contacts__title">Приезжайте к нам в гости!
                        Проконсультируем Вас
                        по всем вопросам ремонта
                    </h3>
                    <ul class="contacts-list">
                        <li class="contacts-list__item">
                            <span class="contacts-list__icon"><img src="img/footer/map-placeholder.png" alt=""></span>
                            <span class="contacts-list__text">г. Москва <br>
                                ул. Ленинга, д. 10,
                                корпус 2, оф. 308</span>
                        </li>
                        <li class="contacts-list__item">
                            <span class="contacts-list__icon"><img src="img/footer/clock-with-white-face.png"
                                    alt=""></span>
                            <span class="contacts-list__text">Режим работы: <br>
                                с 9:00 до 18:00</span>
                        </li>
                        <li class="contacts-list__item">
                            <span class="contacts-list__icon"><img src="img/footer/phone-call-button.png" alt="">
                            </span>
                            <span class="contacts-list__text">Телефон:<br>
                                <a href="tel: + 7(495)42-251-31 ">+ 7 (495) 42-251-31</a></span>
                        </li>
                    </ul>
                </div>
                <!-- /.contacts -->
            </div>
            <!-- /.contacts-block -->
        </div>
        <!-- /.container -->

    </footer>
    <!-- /.footer section -->

Стили распределены следующим образом:

.footer
    position: relative

.map
    position: absolute
    width: 50%
    top: 0
    left: 0

.contacts
    flex-basis: 50%
    padding-top: 100px
    padding-left: 200px
    &-block
        display: flex
        justify-content: flex-end
    &__title
        font-size: 24px
        line-height: 1.4
        +bold
        margin-bottom: 100px
    &-list
        list-style: none
        &__item
            display: flex
            align-items: flex-start
            margin-bottom: 39px
        &__icon
            text-align: center
            width: 20px
            height: 20px
            margin-right: 23px

Вот что из этого выходит:

Как мне заставить элементы располагаться вот таким образом?

Answer 1

Если вы хотите, что бы ваши элементы располагались таким образом только на ширине не больше 780px то оберните их вот так:

@media only screen and (max-width: 780px){
.footer{
    display: flex;
    flex-wrap: wrap-reverse;
}


.map{
    position: relative;
    width: 100%;
    float: right;
}

.container{
    position: relative;
    width: 100%;
    float: left;
}
}

Answer 2

Смог решить проблему следующим образом:

Я создал "фиктивный" div, который впоследствии только занимает место, чтобы я мог воспользоваться display: flex и flex-direction: column-reverse

html:

<footer class="footer">
        <div class="map" id="map">
            <script type="text/javascript" charset="utf-8" async
                src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A3b4851cc277917ecc11ea75bdc2a16e0839eb4494aa852c8b2162a19f79a0518&amp;width=100%25&amp;height=640&amp;lang=ru_RU&amp;scroll=false">
            </script>
        </div>
        <!-- /.map -->
        <div class="container">
            <div class="contacts-block">
                <div class="contacts-white"></div>
                <div class="contacts">
                    <h3 class="contacts__title">Приезжайте к нам в гости! <br>
                        Проконсультируем Вас
                        по всем вопросам ремонта
                    </h3>
                    <ul class="contacts-list">
                        <li class="contacts-list__item">
                            <span class="contacts-list__icon"><img src="img/footer/map-placeholder.png" alt=""></span>
                            <span class="contacts-list__text">г. Москва <br>
                                ул. Ленинга, д. 10, <br>
                                корпус 2, оф. 308</span>
                        </li>
                        <li class="contacts-list__item">
                            <span class="contacts-list__icon"><img src="img/footer/clock-with-white-face.png"
                                    alt=""></span>
                            <span class="contacts-list__text">Режим работы: <br>
                                с 9:00 до 18:00</span>
                        </li>
                        <li class="contacts-list__item">
                            <span class="contacts-list__icon"><img src="img/footer/phone-call-button.png" alt="">
                            </span>
                            <span class="contacts-list__text">Телефон:<br>
                                <a href="tel: + 7(495)42-251-31 ">+ 7 (495) 42-251-31</a></span>
                        </li>
                    </ul>
                </div>
                <!-- /.contacts -->
            </div>
            <!-- /.contacts-block -->
        </div>
        <!-- /.container -->

    </footer>
    <!-- /.footer section -->

sass:

.footer
    position: relative

.map
    position: absolute
    width: 50%
    top: 0
    left: 0

.contacts
    flex-basis: 50%
    padding-top: 100px
    padding-left: 200px
    &-white
        flex-basis: 50%
        background-color: #fff
        height: 100%
    &-block
        display: flex
        justify-content: space-between
    &__title
        font-size: 24px
        line-height: 1.4
        +bold
        margin-bottom: 100px
    &-list
        list-style: none
        &__item
            display: flex
            align-items: flex-start
            margin-bottom: 39px
            > span
                line-height: 19px
                > a
                    text-decoration: none
                    color: black
        &__icon
            text-align: center
            width: 20px
            height: 20px
            margin-right: 23px


    @media ( max-width: 768px  )
        .contacts
            padding-top: 67px
            padding-left: 0
            &-block
                display: flex
                justify-content: space-between
                flex-direction: column-reverse
                height: 1100px
            &__title
                margin-top: 67px
                text-align: left
                font-size: 18px
                margin: auto
                margin-bottom: 30px
            &-list
                padding-left: 0

        .map
            position: absolute
            width: 100%
            bottom: 0 
            left: 0
            top: auto

Answer 3

Я бы сделал так, упростил и убрал лишнее:

HTML

<footer class="footer">
    <div class="map" id="map">
        <script type="text/javascript" charset="utf-8" async
                src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A3b4851cc277917ecc11ea75bdc2a16e0839eb4494aa852c8b2162a19f79a0518&amp;width=100%25&amp;height=640&amp;lang=ru_RU&amp;scroll=false">
        </script>
    </div>
    <!-- /.map -->
    <div class="contacts">
        <div class="contacts-list__content">
            <h3 class="contacts__title">Приезжайте к нам в гости! <br>
                Проконсультируем Вас
                по всем вопросам ремонта
            </h3>
            <ul class="contacts-list">
                <li class="contacts-list__item">
                    <span class="contacts-list__icon"><img src="img/footer/map-placeholder.png" alt=""></span>
                    <span class="contacts-list__text">г. Москва <br>
                            ул. Ленинга, д. 10, <br>
                            корпус 2, оф. 308</span>
                </li>
                <li class="contacts-list__item">
                        <span class="contacts-list__icon"><img src="img/footer/clock-with-white-face.png"
                                                               alt=""></span>
                    <span class="contacts-list__text">Режим работы: <br>
                            с 9:00 до 18:00</span>
                </li>
                <li class="contacts-list__item">
                        <span class="contacts-list__icon"><img src="img/footer/phone-call-button.png" alt="">
                        </span>
                    <span class="contacts-list__text">Телефон:<br>
                            <a href="tel: + 7(495)42-251-31 ">+ 7 (495) 42-251-31</a></span>
                </li>
            </ul>
        </div>
    </div>
    <!-- /.contacts -->
</footer>
<!-- /.footer section -->

SASS

.footer
  display: flex

.map
  width: 50%

.contacts
  display: flex
  flex: 0 0 50%
  align-items: center
  justify-content: center

  &__title
    font-size: 24px
    line-height: 1.4
    +bold
    margin-bottom: 100px

  &-list
    list-style: none

    &__content
      padding: 100px

    &__item
      display: flex
      align-items: flex-start
      margin-bottom: 39px

      > span
        line-height: 19px

        > a
          text-decoration: none
          color: black

    &__icon
      text-align: center
      width: 20px
      height: 20px
      margin-right: 23px


@media (max-width: 768px)
  .footer
    flex-direction: column-reverse

  .map
    width: 100%

    &__title
      text-align: left
      font-size: 18px
      margin: 67px auto 30px

    &-list
      padding-left: 0

БЛОГ НА HUSL

Поменять направление блоков (из горизонтального в вертикальное)

Ответы (3 шт):