My goal is to achieve the following :
https://i.sstatic.net/jI83o.png
I attempted to use this code. It functions as a desktop version but not on mobile. I was advised to code with a mobile-first approach. I am looking for a solution that allows me to create choreographies for both desktop and mobile without using JavaScript, preferably something that complements flexbox.
html {
box-sizing: border-box;
font-size: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
.grid {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.col-m-1 {
width: 8.333%;
}
.col-m-2 {
width: 16.667%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.333%;
}
.col-m-5 {
width: 41.667%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.333%;
}
.col-m-8 {
width: 66.667%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.333%;
}
.col-m-11 {
width: 91.667%;
}
.col-m-12 {
width: 100%;
}
@media (min-width: 769px){
.col-d-1 {
width: 8.333%;
}
.col-d-2 {
width: 16.667%;
}
.col-d-3 {
width: 25%;
}
.col-d-4 {
width: 33.333%;
}
.col-d-5 {
width: 41.667%;
}
.col-d-6 {
width: 50%;
}
.col-d-7 {
width: 58.333%;
}
.col-d-8 {
width: 66.667%;
}
.col-d-9 {
width: 75%;
}
.col-d-10 {
width: 83.333%;
}
.col-d-11 {
width: 91.667%;
}
.col-d-12 {
width: 100%;
}
}<head>
<meta charset="utf-8">
</head>
<body>
<article class="grid article">
<div class="my-img-supclass col-m-12 col-t-4 col-d-4">
<img src="img.jpg">
</div>
<div class="col-m-12 col-t-8 col-d-8">
<h2 class="article-h2"><span>a h2 title</span></h2>
<p class="article-p">some content</p>
</div>
</article>
<body>This setup isn't effective for mobile as the image ends up at the bottom due to the second div placement.