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

Question

[flare0n]

Требуется поменять блоки местами на определенной ширине (320px) Как это можно реализовать не прибегая к изменениям в HTML коде? Пробовал flow, - как итог: ломает блок .product-text

Вот кусочек HTML

кода

<section class="product">
				<div class="container">
					<div class="row">
						<div class="col-md-7 col-sm-12">
							<div class="product-slider_for">
								<img src="img/item-1.jpg" alt="">
								<img src="img/item-2.jpg" alt="">
								<img src="img/item-3.jpg" alt="">
								<img src="img/item-1.jpg" alt="">
								<img src="img/item-2.jpg" alt="">
								<img src="img/item-3.jpg" alt="">
							</div>
							<div class="product-slider_nav">
								<img src="img/item-1.jpg" alt="">
								<img src="img/item-2.jpg" alt="">
								<img src="img/item-3.jpg" alt="">
								<img src="img/item-1.jpg" alt="">
								<img src="img/item-2.jpg" alt="">
								<img src="img/item-3.jpg" alt="">
							</div>
						</div>
						<!-- /.col-7 -->
						<div class="col-md-5 col-sm-12">
							<div class="product-text">
								<h2>Производство</h2>
								<p>Современное оборудование позволяет произ- водить до 5 миллионов квадратных метров гофрокартона ежемесячно. Гофрокороба и лотки производятся по ГОСТу или чертежам заказчика.</p>
								<p>Досконально прорабатываем конструкции коро- бов и составы сырья, учитывая условия хранения, транспортировки и производства вашей продукции.</p>
								<p>Возможно нанесение цветной флексопечати на поверхность коробов.</p>
							</div>
						</div>
						<!-- /.col-5 -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.container -->
			</section>

Comments

[Роман]

Что то ваш "Вот кусочек HTML кода" совсем не html :)

[flare0n]

Роман, Исправил, извиняюсь.

[Роман]

flare0n, возможность использовать js на клиенте допустима?

[flare0n]

Роман, Да, для меня все ДОПУСТИМО, учусь на курсе, однако на макете для (320) ширины обнаружил данную особенность, загляну сюда утром. Спасибо.

[Роман]

flare0n, сейчас я уже ушел спать, утром, если никто не отпишется - напишу и выложу код.

[Виталий Першин]

Какая версия бутстрап? Если 4-я то там на флексах достаточно поменять order

Answer 1

[Pavel Kuzyakin]

.row {
    display: flex;
    flex-direction: column-reverse;
}

Comments

[flare0n]

>
	.product
		.row
			display: flex
			flex-direction: column-reverse

Главное поставить класс .row к основному блоку, а то остальное в проекте полетит

Answer 2

[siarheisiarhei]

flex-direction: column-reverse; ....ie - от - (column) = сознание-ориентацию-теряет ...
ну, понадежнее в таком русле... (в сторону) насмотрелся....
{
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}