Переключайте порядок столбцов на меньших экранах с помощью медиа-запросов ⇐ CSS

[Anonymous]

Я создал 2 столбца и 4 строки, каждый из которых является гибким элементом, он преобразуется в текстовое изображение, а затем переключается.
Когда вы изменяете размер окна, оно становится текстовым-изображением- img-text, но я хочу использовать 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;
}

Код: Выделить всё

    


Getting Ahead
some text




[img]pics/gettingahead.jpeg[/img]






[img]pics/understanding.jpeg[/img]




Understanding
some text






Goal Setting
some text




[img]pics/goalsetting.jpg[/img]






[img]pics/passingstandard.jpeg[/img]




Surpassing The Standard
some text

Подробнее здесь: https://stackoverflow.com/questions/735 ... ia-queries