I’ve looked at your page and I can’t see an easy way to do what you want. The simplest way is to absolutely place those images to the side. This means that the mobile version should be in the html order that you want it to be displayed (which should be the logical order anyway).
<div class="wrap">
<header>
<picture>
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/logo.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/logo.jpg" alt="logo" height="100" class="logo" />
</picture>
</header>
<main class="container">
<h1>
Outdoor Learning Sessions
</h1>
<section class="outdoorSection">
<article class="img" id="img1">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="girl in tree" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">What does a tree do?</h2>
<p class="teachersText">Examine what the different parts of a tree actually do and consider how important they are to us and the world we live in. Includes tree measuring and exploring carbon lockup.</p>
</article>
<article>
<h2 class="teacherSubTitle">Minibeast Discovery</h2>
<p class="teachersText">Discover what minibeasts are lurking in your school grounds. A minibeast hunt combined with themed games and activities will gain an insight into the fascinating world of invertebrates.</p>
</article>
<article class="img" id="img2">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor1.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor1.jpg" alt="child with insect" class="outdoorImage">
</picture>
</article>
<article>
<h2 class="teacherSubTitle">How the Water Works</h2>
<p class="teachersText">Explore how the water cycle works in nature and how our usage impacts on nature. </p>
</article>
<article>
<h2 class="teacherSubTitle">Sensory Exploration</h2>
<p class="teachersText">Develop a connection to the natural world through a multitude of senses. Develop improved wellbeing, physical literacy and emotional intelligence by exploring nature.</p>
</article>
<article class="img" id="img3">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="boy hugging a tree" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">Food Chains</h2>
<p class="teachersText">Do you know what eats what in the British woodland environment? Introduction to simple food chains and what they are comprised of. Develop understanding of how energy flows through the eco system and what happens when humans impact on it.</p>
</article>
<article>
<h2 class="teacherSubTitle">Natural Art</h2>
<p class="teachersText">Let their creativity flow using the natural environment as inspiration. We will explore nature’s colours, textures and shapes before the group work to create their own masterpieces</p>
</article>
<article class="img" id="img4">
<picture class="outdoorPicture">
<source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor6.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor6.jpg" alt="boy in tree" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">Literacy in the Environment</h2>
<p class="teachersText">Literacy lessons don’t have to happen indoors. Use nature to inspire simple poetry and storytelling. We will play with words and get creative with language whilst enjoying being in the outdoors.</p>
</article>
<article class="img" id="img5">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor2.webp" />
<img src="https://danieljeffery.co.uk/sheena/outdoor2.jpg" alt="children playing in woods" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">Bespoke Sessions</h2>
<p class="teachersText">Not sure how to link a topic to outdoor learning? We are always up for a challenge, so get in touch!</p>
</article>
<article class="img" id="img6">
<picture class="outdoorPicture">
<source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor5.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor5.jpg" alt="child in fallen leaves" class="outdoorImage" />
</picture>
</article>
</section>
</main>
</div><div class="wrap">
<header>
<picture>
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/logo.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/logo.jpg" alt="logo" height="100" class="logo" />
</picture>
</header>
<main class="container">
<h1>
Outdoor Learning Sessions
</h1>
<section class="outdoorSection">
<article class="img" id="img1">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="girl in tree" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">What does a tree do?</h2>
<p class="teachersText">Examine what the different parts of a tree actually do and consider how important they are to us and the world we live in. Includes tree measuring and exploring carbon lockup.</p>
</article>
<article>
<h2 class="teacherSubTitle">Minibeast Discovery</h2>
<p class="teachersText">Discover what minibeasts are lurking in your school grounds. A minibeast hunt combined with themed games and activities will gain an insight into the fascinating world of invertebrates.</p>
</article>
<article class="img" id="img2">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor1.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor1.jpg" alt="child with insect" class="outdoorImage">
</picture>
</article>
<article>
<h2 class="teacherSubTitle">How the Water Works</h2>
<p class="teachersText">Explore how the water cycle works in nature and how our usage impacts on nature. </p>
</article>
<article>
<h2 class="teacherSubTitle">Sensory Exploration</h2>
<p class="teachersText">Develop a connection to the natural world through a multitude of senses. Develop improved wellbeing, physical literacy and emotional intelligence by exploring nature.</p>
</article>
<article class="img" id="img3">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="boy hugging a tree" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">Food Chains</h2>
<p class="teachersText">Do you know what eats what in the British woodland environment? Introduction to simple food chains and what they are comprised of. Develop understanding of how energy flows through the eco system and what happens when humans impact on it.</p>
</article>
<article>
<h2 class="teacherSubTitle">Natural Art</h2>
<p class="teachersText">Let their creativity flow using the natural environment as inspiration. We will explore nature’s colours, textures and shapes before the group work to create their own masterpieces</p>
</article>
<article class="img" id="img4">
<picture class="outdoorPicture">
<source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor6.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor6.jpg" alt="boy in tree" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">Literacy in the Environment</h2>
<p class="teachersText">Literacy lessons don’t have to happen indoors. Use nature to inspire simple poetry and storytelling. We will play with words and get creative with language whilst enjoying being in the outdoors.</p>
</article>
<article class="img" id="img5">
<picture class="outdoorPicture">
<source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor2.webp" />
<img src="https://danieljeffery.co.uk/sheena/outdoor2.jpg" alt="children playing in woods" class="outdoorImage" />
</picture>
</article>
<article>
<h2 class="teacherSubTitle">Bespoke Sessions</h2>
<p class="teachersText">Not sure how to link a topic to outdoor learning? We are always up for a challenge, so get in touch!</p>
</article>
<article class="img" id="img6">
<picture class="outdoorPicture">
<source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor5.webp" />
<img src="https://danieljeffery.co.uk/sheena/images/outdoor5.jpg" alt="child in fallen leaves" class="outdoorImage" />
</picture>
</article>
</section>
</main>
</div>
/* Override browser defaults
* {
padding: 0px;
border: 0px;
margin: 0px;
box-sizing: border-box;
}
Please don't do this as it breaks a lot of form elements and is not the nest way to go about it. Just reset the margins and padding on the elements you use instead.
Box-sizing needs t be specified differently anyway to catch all occurnces.
*/
/*To remove the horrid black border in Chrome when an input acquires focus
*,*:focus,*:hover{
outline:none;
}
Please don;t do this as you kill keyboard accessibility straight away.
If you use the above then make sure you add an appropriate focus state that fits in with the design
*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
}
h1,
h2,
p {
margin: 1rem 0;
}
article h1 {
font-size: 2rem;
}
h1{text-align:center;}
img,
source {
display: block;
}
/* Define variables to be used for colours*/
:root {
--headlineColor: #ca6;
--textColor: #094;
--backgroundColor: #ffe;
--otherColor: #ce6;
--otherColor2: #fa5;
}
/* ios doesn't like background-attachment:fixed so we use positoin fixed instead on a pseudo element instead */
body:before {
content: "";
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background: url("https://www.danieljeffery.co.uk/sheena/images/background3.jpg")
no-repeat 50%;
background-size: cover;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Chelsea Market", cursive;
color: var(--headlineColor);
padding: 5px;
margin: 5px;
}
p,
address,
span,
ul,
li,
dl,
dt,
dd {
font-family: "Chelsea Market", cursive;
color: var(--textColor);
font-size: 1.2rem;
padding: 5px;
margin: 5px;
}
dt {
color: var(--headlineColor);
margin: 0 0 0 30px;
}
li {
padding: 0;
margin: 0 0 0 60px;
}
header {
margin: 3px;
display: flex;
}
header picture {
margin: auto;
}
.footer {
font-size: small;
}
footer.container {
display: flex;
flex-direction: column;
border-radius: 4px 4px 0px 0px;
}
.socialMedia {
color: var(--headlineColor);
}
a:link,
a:visited {
color: var(--headlineColor);
text-decoration: none;
}
a:hover {
color: var(--textColor);
}
.logo {
border: solid 1px var(--headlineColor);
}
.wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 1280px;
margin: auto;
justify-content: center;
}
.container {
background-color: var(--backgroundColor);
border-radius: 4px;
flex: 1 0 0%;
}
.teacherSubTitle {
color: var(--otherColor);
padding: 0px;
margin: 1rem 20px 0 20px;
}
.teachersText {
padding: 0 20px 10px 20px;
margin: 0px;
}
.outdoorPicture,
.outdoorPicture img {
max-width: 280px;
height: auto;
width: 100%;
margin: auto;
}
/* *** Tablet and desktop *** */
@media screen and (min-width: 768px) {
p,
th,
td,
input,
select,
pre,
span,
ul,
li,
dl,
dt,
dd {
font-size: 1rem;
}
.container {
padding: 0 150px;
position: relative;
margin: 0 10px;
}
.img img,
.img picture {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
padding: 0;
}
#img1,
#img2,
#img3,
#img4,
#img5,
#img6 {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 33.333%;
}
#img2,
#img5 {
top: 33.333%;
}
#img3,
#img6 {
top: 66.666%;
}
#img4,
#img5,
#img6 {
left: auto;
right: 0;
}
footer.container {
flex-direction: row;
}
header {
align-items: flex-end;
}
header picture {
margin:0 auto 0 0;
}
}
@media screen and (min-width: 992px) {
.container {
padding: 0 250px;
position: relative;
}
#img1,
#img2,
#img3,
#img4,
#img5,
#img6 {
width: 225px;
}
}
Desktop View:
Smaller screen View:
Bear in mind I have not error checked the code yet or fine tuned it as there is a lot of your stuff in there I would re-organise and tidy up
Be careful when you globally style elements like p, h1, h2, ul, li, article, picture, div etc with specific styles (other than margin and padding) because you end up styling all those instances which will affect them sitewide including third party add ons etc. It is better to add a class to them and avoid any issues later.
I notice you used IDs beginning with a number and although this is now valid in html5 it is not valid in CSS so you can’t use those IDs as hooks for styling although they may be useful for JS.
Lastly I would suggest rather than copying the Wix site you re-design it into something more usable and automatic especially if you want your client to manage it. There are plenty of nice designs around you can copy or modify but generally the simpler the better.
Hope its of some use anyway and sorry for being so long winded.
Yes its well out of date now but the basics of it are sound. These days you really need to be learning flex and grid at the same time as learning the basics which is why its harder these days as there is a lot more to learn.