О позиционировании HTML <picture><source> элементов

Question

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

Я использую элемент и хотел бы переместить позицию y на

source srcset = "res / african.jpg" media = "(min-width: 600px)"> элемент down.

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

               <div class = "col-2 col-s-4">
                    <picture >

                    <source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">
                    <source srcset = "res/african.jpg" media = "(min-width:600px)" // i would like to individually move down>
                    <source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">

                    <img src "">
                </picture>

Answer 1

Сделан отдельный элемент изображения с новым div>

                <div class = "africantabletimage">  
                    <picture>
                        <source srcset = "res/african.jpg" media = "(min-width:600px)" >
                        <img src "">
                    </picture>
                <picture >

                    <source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">

                    </div>
                    <source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">

                    <img src "">
                </picture>

            </div>

CSS

.africantablet image{
        padding-top:7%;
    }