Я хочу изменить порядок столбцов, как только ширина браузера станет 768 пикселей, чтобы сделать его адаптивным для мобильных устройств.
На рабочем столе это выглядит так, как я хочу.
[image0][text0]
[text1][image1]
[image2][text2]
Но на мобильном телефоне это будет выглядеть так, как показано ниже. Который не выглядит слишком хорошо, особенно части со звездой *.
[image0]
[text0]*
[text1]*
[image1]*
[image2]*
[text2]
Как мне сделать так, как показано ниже?
[image0]
[text0]
[image1]
[text1]
[image2]
[text2]
Я загрузил сайт здесь: https://yellowhexagon.github.io/. Это относится к 3 изображениям и 3 текстам, которые находятся ниже раздела героя.
Я пытался использовать display: grid и display: flex с заказом и не смог получить его ни для одного из них. Я также использую bulma.io, так что, возможно, существует конфликт между столбцами bulma. В целом, просто запутался и не мог найти много информации в Интернете, поэтому я был бы очень признателен за любую помощь. Спасибо большое за ваше время!