Bootstrap 4 segítség. Hogyan alakítsam át a kódot?

Mivel másnak sem volt jobb ötlete, a határidő meg szorít:

[link]

Megoldottam "parasztba". A 2-es blokk nem duplikálható, mert a benne lévő tartalom ID-kkal van ellátva és megzavarodik a JS (érthető módon), de a 3-assal ez megoldható. Csak nem szép.

Ha valakinek van jobb megoldása akkor azt szívesen várom.

Igen, tudom, a bootstrap is azt használja. :)

.row {

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

margin-right: -15px;

margin-left: -15px;

}

vagy épp az order:

.order-md-2 {

-ms-flex-order: 2;

order: 2;

}

Tehát ezt használtam én is. A gond ott van, hogy a fenti (képen) látható megoldást szeretném elérni, de attól "szebb" módon, mint a "megoldásom" (miszerint az oszlop alsó felét elrejtem mobil nézetben felül, alul pedig a "másolatát" megjelenítem). Tehát nem szeretném ha egy elem is 2x szerepelne.

És az "1"-es div-et kellene a másik oszlop közepére beiktatni, ami nyilván nem lehetséges. Vagy eleve az oszlopokat kellene elengedni? Szóval gondolom értitek mi a problémám. Teljesen triviálisnak tűnik de nem áll össze valahogy...

#5 Öhm.. Azt hiszem nem teljesen érted a problémát. (nézd meg kérlek a fenti kódokat amiket linkeltem)

Pontosan ezt csináltam. :)

A gond (vagy "feladat"), hogy a jobb oldali oszlopban van két "doboz" és azok közé kellene becsúsznia a bal oldali oszlopnak. (lásd kép)

Nyilván ebben az elrendezésben vagy fölé vagy alá tudom berakni a teljes jobb oldali oszlopot... de így a 2-es és 3-as is egy helyre kerül. Na az nekem nem jó.

(Ezért csináltam azt a megoldást -lásd második kód-, hogy a 3-as doboz az 1-es alatt és fölött is létezik, és a képernyő méretétől függően elrejtem/megjelenítem. Csak ez ugye nem "szép" megoldás... erre keresek egy olyan variációt, ahol minden doboz csak 1x szerepel a HTML kódban és szimplán CSS-el van megvalósítva a képen látható elrendezés.)

#7 Ezt kifejtenéd kérlek kicsit pontosabban? Mármint nyilván értem mi a float és @media, csak ugye flex konténeren belül nem használhatsz float-ot.

[link]

Most jelenleg így néz ki:

[link]

(így picit látványosabb mint a pastebin-es kód)

Tehát itt szeretném elérni, hogy a HTML-ben mindhárom doboz csak 1x szerepeljen, de az itt látható (és kipróbálható) működés megmaradjon. A jelenlegi módon is működik, de szimplán szakmailag érdekel, hogy hogyan lehetne ezt szebben megoldani, mert őszintén szólva baromira nem tetszik így. (pl ha template engine-t használsz és a 3-as doboz tartalmát másik fájlból húzod be, akkor nagyon nem jó, ha mondjuk egy formot tartalmaz és ugyanazok az ID-k több elemnél is szerepelnek az oldalon, mivel kétszer van betöltve csak az egyik mindig el van rejtve)

#9

Hmm. Köszi..

Mindenképpen a flex-el akartam kombinálni (mivel bootstrapre épül) de néha a kevesebb több. :)