Как реализовать такую структуру с помощью bootstrap?

Question

[Dgeremmi]

Когда экран достаточно широкий имеется вот такая структура
Когда экран недостаточно широкий, то страница преобразовывается к такому виду
То-есть синий блок уходит под желтый, а желтый становится шириной во всю страницу
Уже сижу часа 2-3 пытаюсь найти решение, но идей, которые бы работали так как надо нет.
Возможно, кто-нибудь здесь знает, буду очень признателен, если объясните как это сделать

Answer 1

[Юрий Лобанов]

У Вас два варианта:
1. Написать все это через медиа-запросы. Т.е. блокам поставить свои классы и определить для них новые величины ширины, отсутпов и так далее. Этот способ хороший, но довольно сложный, так как стандартная сетка Вам не даст такое сделать, а значит необходимо от нее для этих трех блоков отказаться.
2. Используя js менять классы. Этот способ плох тем, что одним css дело не ограничится, зато хорош тем, что Вы можете использовать стандартную сетку, а свои классы добавить блокам исключительно как селекторы для js.

Answer 2

[Евгений]

<div class="container">
	<div class="row">
        	<div class="yellow col-sm-12 hidden-md hidden-lg"></div>
      		<div class="blue col-sm-4 col-md-4"></div>
        	<div class="yellow col-md-8"></div>
		<div class="red col-sm-8  col-md-8"></div>
	</div>
</div>

Comments

[Trow_eu]

вариант интересный, но дублировать весь див с содержимым как-то неправильно

[Евгений]

По другому никак, только переносить node при помощи js, или выдавать контент под разные разрешения. И нет ни чего страшного в том что контент дублируется, при адаптивной вёрстке с использованием медиазапросов это обычное дело.

[Dgeremmi]

Да, но все-таки такой вариант применять не хотелось бы, поскольку верстка будет по cms

Answer 3

[Anton Yatsenyuk]

<div class="container">
	<div class="row">
		<div class="blue col-sm-4 col-md-4">
			
		</div>
		<div class="yellow col-sm-12 col-md-8">
			
		</div>
		<div class="red col-sm-8 col-md-8">
			
		</div>
	</div>
</div>

Для .blue в css через @media (min-width: 970px) нужно задать height.

Могут быть неточности, но они решатся через @media, а сетка такая должна быть

Comments

[Dgeremmi]

Так не получится, потому что когда будет действовать sm yellow переместится на следующую строку, так как 4+12>12 то же самое для red, так как 12+8>12