@Ovanek

Как поменять блоки местами в мобильной версии?

Сделал ссылку с перекрестным контентом (слева блок с background, справа блок с текстом). следующая ссылка с блоками наоборот (слева текст, справа ссылки).
Необходимо, чтобы в мобильной версии было единообразие (сверху текст, снизу изображение у всех).

<a href="">
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show" style="background-image: url(assets/img/img7.jpg);">
	<div class="dark"></div>
         </div>
	<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
		<h3>Заголовок</h3>
		<p>Текст</p>
	  </div>
</a>  

<a href="">
	<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
		<h3>Заголовок</h3>
		<p>Текст </p>
	</div>				   				
	div class=" col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show" style="background-image: url(assets/img/img8-1.jpg);">
		<div class="dark"></div>
	</div>
</a>
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
DanArst
@DanArst
Э, Ойboy!
Вам нужно расположить блоки так, как вы хотите, чтобы они были в мобильной версии. Т.е. блок_текст->блок_картинка. Добавьте просто к первому блок_картинка класс col-sm-pull-6

<a href="">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
    <h3>Заголовок</h3>
    <p>Текст</p>
    </div>
 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-sm-pull-6 goods1 _anim-show" style="background-image: url(assets/img/img7.jpg);">
  <div class="dark"></div>
         </div>
</a>  

<a href="">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show">
    <h3>Заголовок</h3>
    <p>Текст </p>
  </div>				   				
  div class=" col-lg-6 col-md-6 col-sm-6 col-xs-12 goods1 _anim-show" style="background-image: url(assets/img/img8-1.jpg);">
    <div class="dark"></div>
  </div>
</a>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Сделайте сами блоки единообразными, а сам контент переместите через order. Тогда на мобильной версии не придётся думать над тем, как правильно расположить контент
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы