I have created 2 columns and 4 rows, each one is a flex element, it goes text-picture, then switches.
When you resize the window it goes text-img-img-text, but I want to go text-img-text-img.
.row1,.row2,.row3,.row4{
display: flex;
flex-wrap: wrap;
margin: 0 7.5vw 3vw 7.5vw;
/* border:3px solid blue; */
}
/* Create four equal columns */
.column {
box-sizing: border-box;
flex: 50%;
margin-top:5vw;
border:3px solid black;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.row1 {
flex-direction: column;
}
}
.strat1, .strat2, .strat3, .strat4 {
box-sizing: border-box;
flex: 50%;
/* margin-left:10vw; */
margin-right:5vw;
/* margin-top:5vw; */
/* transform: translateY(4vw); */
border:3px solid black;
}
.strat1 h1, .strat2 h1, .strat3 h1, .strat4 h1{
display: block;
font-size: 2.2rem;
overflow-wrap: break-word;
text-align: center;
}
.strat1 p,.strat2 p,.strat3 p,.strat4 p{
display: block;
overflow-wrap: break-word;
font-size: 1.1rem;
line-height: 1.8rem;
}
img{
width:25rem;
height:20rem;
/* transform: translateY(6vw); */
}
.strat2-img,.strat4-img{
float:right;
margin-right:4vw;
}
.strat1-img,.strat3-img{
margin-left:4vw;
}
<div >
<div >
<div >
<h1>Getting Ahead</h1>
<p>some text</p>
</div>
</div>
<div >
<div >
<img src="pics/gettingahead.jpeg">
</div>
</div>
</div>
<div >
<div >
<div >
<img src="pics/understanding.jpeg">
</div>
</div>
<div >
<div >
<h1>Understanding</h1>
<p>some text</p>
</div>
</div>
</div>
<div >
<div >
<div >
<h1>Goal Setting</h1>
<p>some text</p>
</div>
</div>
<div >
<div >
<img src="pics/goalsetting.jpg">
</div>
</div>
</div>
<div >
<div >
<div >
<img src="pics/passingstandard.jpeg">
</div>
</div>
<div >
<div >
<h1>Surpassing The Standard</h1>
<p>some text</p>
</div>
</div>
</div>
CodePudding user response:
You can switch the direction using flex-direction
, see MDN docs about flex-direction.
Used in a media query, this can reverse the order on smaller screens:
@media screen and (max-width: 800px) {
.row1 {
flex-direction: column;
}
.row2, .row4 {
flex-direction: column-reverse;
}
}
CodePudding user response:
You could use CSS Grid, that gives you complete control over where your elements get placed using the order property. See the following example:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.container>div {
display: inline-grid;
border: 1px solid black;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 800px) {
.col1 {
order: 2;
}
.col2 {
order: 1;
}
.col3 {
order: 4;
}
.col4 {
order: 3;
}
}
<div >
<div >Text 1</div>
<div ><img src='https://picsum.photos/id/10/200'></div>
<div >Text 2</div>
<div ><img src='https://picsum.photos/id/1003/200'></div>
</div>