Jak widać w kodzie umieszczonym poniżej:
- mamy 3 wiersze, a w kazdym z nich
- dla lg oraz md mamy 3 kolumny(C1,C2,C3) o szerokosci 4 kolumn siatki
- dla sm mamy 3 kolumny o szerokosci 6 kolumn siatki
Dla rozdzielczosci lg oraz md tresc ladnie sie uklada i dopasowuje do ekranu, jednak dla rozdzielczosci sm konieczne jest, aby kazda kolumna miala szerokosc 6 kolumn siatki. Problem tkwi w tym, że skoro przekroczyłem maksymalna dopuszczalną ilosc kolumn w wierszu, kolumna C-3 pojawi sie w nowej linii, zaraz pod C-1. Nastepnie pod C-3 tworzony jest nowy wiersz, więc kolumna C-3 pozostaje sama w wierszu z pusta przestrzenia o szerokosci 6 kolumn siatki. Jak najbardziej optymalnie zaplanowac rozklad tych kolumn, aby dla rozdzielczosci SM, w kazdym wierszu bylo po 2 kolumny o szerokosci 6 kolum siatki? Jedyne rozwiazanie jakie przychodzi mi do glowy to pobawic sie klasami: hidden i visible, jednak wydaje mi sie ze nie jest to eleganckie rozwiazanie i wymusza powielanie tych samych tresci w kodzie.(Chodzi mi tu o duplikacje kolumny C-3, ukrycie jej dla SM w wierszu nr. 1, a nastepnie dodanie jej do wiersza nr. 2 z parametrem visible-sm.)
@Edit
2 rozwiazanie - stworzenie jednego wiersza + clearfix, co o tym myslicie?
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
C-1
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
C-2
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
C-3
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
C-1
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
C-2
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
C-3
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
C-1
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
C-2
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
C-3
</div>
</div>