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

Question

[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>

Comments

[Антон Литвиненко]

я чисто позанудствовать. У вас куча ненужных классов. У бутстрапа mobile-first, поэтому если у блока есть класс col-sm-6, то классы col-md-6, col-lg-6 не нужны, только разметку загромождают.
Также по хорошему сетку желательно отделять от верстки. тоесть вешать бекграунды и дополнительную стилизацию желательно на блок, который будет внутри блока с сеткой, а не на саму сетку.
Как поменять местами вам ответили. Судя по всему у вас бутстрап 3, где еще не было флексов.
Расставляете блоки в порядке, который нужен на мобилке, а сдвигаете их классами push и pull:
col-sm-push-6, col-sm-pull-6

Answer 1

[Danny Arty]

Вам нужно расположить блоки так, как вы хотите, чтобы они были в мобильной версии. Т.е. блок_текст->блок_картинка. Добавьте просто к первому блок_картинка класс 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>

Comments

[Ovanek]

Да, всё получилось, большое спасибо
Пытался играть через order, но этот метод в разы проще

[Danny Arty]

Ovanek, Пожалуйста :) Советую почитать про изменение порядка bootstrap-блоков, может пригодится

Answer 2

[Никита Михайлов]

Сделайте сами блоки единообразными, а сам контент переместите через order. Тогда на мобильной версии не придётся думать над тем, как правильно расположить контент