Bootstrap grid re-order

[MartyF]

Ben een beetje aan het puzzelen met een responsive website op basis van Bootstrap. Maar ik zie de oplossing even niet, als het al kan.



Ik had de desktop gebouwd door een linker kolom (col-12 col-md-4) en een rechter kolom (col-12 col-md-8) met daarin geneste rows/cols, zodat zowel de titel als de tekst onder elkaar naast het plaatje staat. In mobile-view worden ze allemaal volle breedte, maar dan komt eerste het plaatje en dan de titel en de tekst, wat onduidelijk wordt. Ik wil dan eigenlijk de titel en het plaatjes verwisselen, zoals in de afbeelding. Maar door de geneste rows werkt "order" niet goed.

Is dit überhaupt mogelijk?

Gr
Martin

[F_J_K]

Kan je de concrete code geven? (Voor zover relevant)

Ik verplaats je even van CSA naar de dev-buren.

[DJMaze]

Stop met Bootstrap.
Wat jij zoekt is flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Een goed voorbeeld voor flexbox ordering is je gmail inbox bijvoorbeeld.
*snip *

[ Voor 64% gewijzigd door Creepy op 25-10-2021 14:58 . Reden: Stiekum een vorm van reclame, dus weggehaald. ]

[RedFox]

Wat vaak het makkelijkst werkt is om te beginnen met de mobiele layout en daarna die voor desktop te maken.
Je wil nu 1 van de 2 kolommen op mobiel opsplitsen en de ander er tussen plaatsen, dat gaat niet werken. Als je van elk blokje een kolom maakt ben je veel flexibeler in het positioneren.

[NMe]

DJMaze schreef op maandag 25 oktober 2021 @ 10:40:
Stop met Bootstrap.

Doe eens niet zo'n adviezen geven als je de situatie van TS niet kent. Er zijn prima valide redenen om Bootstrap te gebruiken en jouw advies om te "stoppen met Bootstrap" zonder de situatie te kennen is kansloos en ronduit kwalijk. Sowieso is flexbox hier niet eens per se de juiste keuze, je wil hier grids voor gebruiken als je dan toch native CSS schrijft.

Los daarvan los je met geen van beide "lege" adviezen het probleem van TS op. TS heeft een probleem met nesting waar iets dat op desktop binnen een gridvakje staat op mobiel ineens boven het gridvakje dat links daarvan staat moet komen. Dat los je niet op door "gewoon even" over te stappen op flexbox of CSS grids.

Wat hier waarschijnlijk een goed idee zou kunnen zijn is om het plaatje gewoon twee keer in je HTML te zetten, waarvan er eentje zichtbaar is op mobiel en eentje op desktop. Bijkomend voordeel dat je resoluties voor dat plaatje kan kiezen die logisch zijn voor de resolutie van het scherm waarop 't gerenderd wordt.

[DJMaze]

NMe schreef op maandag 25 oktober 2021 @ 14:52:
TS heeft een probleem met nesting waar iets dat op desktop binnen een gridvakje staat op mobiel ineens boven het gridvakje dat links daarvan staat moet komen. Dat los je niet op door "gewoon even" over te stappen op flexbox of CSS grids.

Dus wel, je kan met flexbox de "order" aanpassen zodat het element eerder/later wordt gerenderd.
Je kan dus zeggen:s

Cascading Stylesheet:

/* plaats plaatje boven */
.plaatje {
    order: 0;
}
/* plaats plaatje rechts van text */
@media (min-width: 1000px) {
    .plaatje {
        order: 1;
    }
}

En dat is precies wat ik doe in *snip* mijn site met verschillende layouts.

Je kan met Bootstrap 4+ wel wat proberen
https://getbootstrap.com/docs/4.0/utilities/flex/
https://getbootstrap.com/docs/5.0/utilities/flex/

[ Voor 22% gewijzigd door RobIII op 25-10-2021 17:26 . Reden: Kap met spammen van je eigen producten/sites. ]

[NMe]

DJMaze schreef op maandag 25 oktober 2021 @ 15:47:
[...]

Dus wel, je kan met flexbox de "order" aanpassen zodat het element eerder/later wordt gerenderd.
Je kan dus zeggen:

Kijk nog eens naar het plaatje van TS. Hoe wil je dat precies met order gaan doen? Op desktop heb je twee kolommen, een voor het plaatje en een voor de titel en de tekst. Binnen die laatste kun je inderdaad flex gebruiken om de titel en de tekst weer van volgorde te veranderen, maar hoe zet je dan vervolgens de titel van de binnenste flexbox op mobiel bóven het plaatje dat in de buitenste flexbox staat? Bootstrap of native flexbox, dat blijft een probleem.

Met het CSS grid kun je dat overigens wel overriden bedenk ik me net omdat je daar de gridpositie aan kan passen, maar ik heb er niet genoeg ervaring mee om daar een voorbeeld van te geven.

[Beyond]

Je kan ook altijd de titel 2x in je DOM zetten en dan hiden/displayen bij een bepaalde 'afmeting'. Misschien niet ideaal maar goed.

https://getbootstrap.com/.../display/#hiding-elements

[MartyF]

Dank allen. Met order lukt het niet, vanwege de nesting. Bepaalde elementen tonen/verbergen, afhankelijk van de view, lijkt mij eigenlijk de beste oplossing.

[Woy]

NMe schreef op maandag 25 oktober 2021 @ 16:51:
[...]

Met het CSS grid kun je dat overigens wel overriden bedenk ik me net omdat je daar de gridpositie aan kan passen, maar ik heb er niet genoeg ervaring mee om daar een voorbeeld van te geven.

Met grid kun je makkelijk met area names werken en de content in de juiste cel plaatsen. In het geval van van Mobile kun je dan gewoon een normale layout gebruiken. Lijkt mij in dit geval inderdaad de beste oplossing

[Woy]

MartyF schreef op maandag 25 oktober 2021 @ 17:59:
Dank allen. Met order lukt het niet, vanwege de nesting. Bepaalde elementen tonen/verbergen, afhankelijk van de view, lijkt mij eigenlijk de beste oplossing.

Met grid is het best eenvoudig te doen, in dit voorbeeld heb ik voor de mobile versie geen grid, maar je kunt daar natuurlijk prima een ander grid voor definieren

HTML:

<div class="container">
  <div class="header">Header</div>
  <img class="image" src="https://picsum.photos/200/300">
  <div class="content">
    Some Text
    Some Text
  </div>
</div>

En de volgende CSS

Cascading Stylesheet:

@media (min-width: 1000px) {
  .container  {    
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "image title"
      "image content";
  }

  .header {
    grid-area: title;
  }

  .image {
    grid-area: image;
  }

  .content {
    grid-area: content;
  }
}

Op zich is content dupliceren ook best een prima manier, maar semantisch klopt dat niet helemaal. Niet iets om je 100% aan vast te houden, maar als het zonder al te veel poespas te voorkomen is houdt het je code ook overzichtelijker.

[ Voor 18% gewijzigd door Woy op 25-10-2021 21:24 ]